한국어
Qt
 

OpenGL Shaders 커튼효과 예제

 

A Book about Qt5에서 소개된 예제이다.

https://qmlbook.github.io/en/ch09/index.html

 

CurtainEffect.qml

import QtQuick 2.6

ShaderEffect {
    anchors.fill: parent

    mesh: GridMesh {
        resolution: Qt.size(50, 50)
    }

    property real topWidth: open?width:20
    property real bottomWidth: topWidth
    property real amplitude: 0.1
    property bool open: false
    property variant source: effectSource

    Behavior on bottomWidth {
        SpringAnimation {
            easing.type: Easing.OutElastic;
            velocity: 250; mass: 1.5;
            spring: 0.5; damping: 0.05
        }
    }

    Behavior on topWidth {
        NumberAnimation { duration: 1000 }
    }


    ShaderEffectSource {
        id: effectSource
        sourceItem: effectImage;
        hideSource: true
    }

    Image {
        id: effectImage
        anchors.fill: parent
        source: "qrc:/assets/fabric.jpg"
        fillMode: Image.Tile
    }

    vertexShader: "
        attribute highp vec4 qt_Vertex;
        attribute highp vec2 qt_MultiTexCoord0;
        uniform highp mat4 qt_Matrix;
        varying highp vec2 qt_TexCoord0;
        varying lowp float shade;

        uniform highp float topWidth;
        uniform highp float bottomWidth;
        uniform highp float width;
        uniform highp float height;
        uniform highp float amplitude;

        void main() {
            qt_TexCoord0 = qt_MultiTexCoord0;

            highp vec4 shift = vec4(0.0, 0.0, 0.0, 0.0);
            highp float swing = (topWidth - bottomWidth) * (qt_Vertex.y / height);
            shift.x = qt_Vertex.x * (width - topWidth + swing) / width;

            shade = sin(21.9911486 * qt_Vertex.x / width);
            shift.y = amplitude * (width - topWidth + swing) * shade;

            gl_Position = qt_Matrix * (qt_Vertex - shift);

            shade = 0.2 * (2.0 - shade ) * ((width - topWidth + swing) / width);
        }"

    fragmentShader: "
        uniform sampler2D source;
        varying highp vec2 qt_TexCoord0;
        varying lowp float shade;
        void main() {
            highp vec4 color = texture2D(source, qt_TexCoord0);
            color.rgb *= 1.0 - shade;
            gl_FragColor = color;
        }"
}

 

main.qml에서 사용한 예제

import QtQuick 2.6
import QtQuick.Window 2.2

Item {
    id: root
    width: background.width;
    height: background.height

    Rectangle {
        id: background
        width: 480
        height: 240
        anchors.centerIn: parent
        color: "#cccccc"
    }

    Text {
        anchors.centerIn: parent
        font.pixelSize: 48
        color: '#efefef'
        text: 'Qt5 Cadaques'
    }

    CurtainEffect {
        id: curtain
        anchors.fill: parent
    }

    MouseArea {
        anchors.fill: parent
        onClicked: curtain.open = !curtain.open
    }
}

 

Shader Effects type은 다음과 같이 커튼효과를 낼 수 있다.

jwplayer

번호 제목 글쓴이 날짜 조회 수
37 ShaderEffect QML Type 을 이용한 그래픽효과 file makersweb 2018.12.09 16
» Qml에서 커튼효과 구현 예제 - Shader Effects file 운영자 2018.12.05 19
35 안드로이드 Qt 프로그래밍 file makersweb 2018.11.30 46
34 리눅스에서 Qt4.8기반 어플리케이션의 한글입력 file makersweb 2018.11.29 16
33 QML에서 동적으로 텍스트 다국어 처리 file makersweb 2018.11.04 90
32 Qt Installer Framework - 패키징, 설치프로그램 제작 file makersweb 2018.10.14 118
31 Qt 응용프로그램 배포(windows) file makersweb 2018.10.10 147
30 소스코드에서 환경변수 가져오기와 설정하기 makersweb 2018.10.08 55
29 표를 만들고 PDF문서로 출력하기 file makersweb 2018.09.30 75
28 Qml에서 키보드 입력 이벤트 핸들링 file makersweb 2018.08.09 165
27 Qml 어플리케이션 정적 빌드 file makersweb 2018.07.27 153
26 Qt Bluetooth 관련 기능 확인 사항 makersweb 2018.07.10 146
25 Qml 및 C++개발시 유용한 팁 makersweb 2018.04.06 477
24 Qt Version확인 방법 makersweb 2018.03.29 384
23 초보자를 위한 첫번째 프로젝트 - QML로 만드는 Hello World file makersweb 2018.03.16 659
22 Windows에서 라즈베리파이3 Qt 어플리케이션 개발 및 원격 실행 file makersweb 2018.02.23 1431
21 Windows에서 라즈베리파이3용 Qt5.10.0 크로스컴파일 [2] file makersweb 2018.02.23 2370
20 Windows환경에서 mingw로 Qt 5.10 정적(static)빌드 file makersweb 2018.02.01 1200
19 다국어 지원 어플리케이션 개발 file makersweb 2018.01.27 367
18 Qt 어플리에이션 전역에 폰트 설정 makersweb 2018.01.24 445