한국어
Qt
 

ShaderEffect을 이용하면 다양한 그래픽효과를 구현할 수 있다. 이를 이용해서 버튼의 클릭 효과를 구현해본다.

ShaderEffectQmlButton.gif

 

MyButton.qml

import QtQuick 2.2

Item{

    signal clicked()
    signal pressed()

    property alias radius: base.radius

    Rectangle{
        id: base

        radius: 10
        anchors.fill: parent
        color: "#10000000"
    }

    ShaderEffect {
        id: shaderEffect1
        opacity: 1
        anchors.fill: parent

        property variant source: effectSource

        ShaderEffectSource {
            id: effectSource
            sourceItem: base
            hideSource: true
        }

        property point normTouchPos
        property real widthToHeightRatio: height / width
        // animated uniform property
        property real spread: 0

        ParallelAnimation {
            id: touchStartAnimation
            UniformAnimator {
                uniform: "spread";
                target: shaderEffect1
                from: 0; to: 1
                duration: 300
                easing.type: Easing.InQuad
            }
            onStopped: {
                // animation stopped
                if(!touch.pressed){
                    if(shaderEffect1.spread != 0)
                        shaderEffect1.spread = 0
                }
            }
        }

        fragmentShader: "
            uniform sampler2D source;
            varying mediump vec2 qt_TexCoord0;
            uniform lowp float qt_Opacity;
            uniform mediump vec2 normTouchPos;
            uniform mediump float widthToHeightRatio;
            uniform mediump float spread;

            void main() {
                mediump float radius = (0.5 + abs(0.5 - normTouchPos.x)) * 1.0 * spread;
                mediump vec2 circleCenter =
                    normTouchPos + (vec2(0.5) - normTouchPos) * radius * 2.0;

                mediump float circleX = (qt_TexCoord0.x - circleCenter.x);
                mediump float circleY = (qt_TexCoord0.y - circleCenter.y) * widthToHeightRatio;

                highp vec4 color = texture2D(source, qt_TexCoord0);

                lowp vec4 tapOverlay =
                    color * step(circleX*circleX + circleY*circleY, radius*radius);
                gl_FragColor = (color + tapOverlay) * qt_Opacity;
            }
        "

        function touchStart(x, y) {
            normTouchPos = Qt.point(x / width, y / height)
            touchStartAnimation.start()
        }

        function touchStop() {
            touchStartAnimation.stop()
        }
    }

    MouseArea{
        id: touch
        anchors.fill: parent
        onPressed: {
            shaderEffect1.touchStop()
            shaderEffect1.touchStart(mouseX, mouseY)
        }
        onClicked: {
            parent.clicked()
            shaderEffect1.spread = 0
        }
        onExited: {
            shaderEffect1.spread = 0
        }
    }
}

 

다음은 구현된 MyButton을 사용하는 방법이다.

main.qml

import QtQuick 2.2
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 320
    height: 240
    title: qsTr("ShaderEffect Custom Button")

    ColumnLayout{
        anchors.centerIn: parent
        spacing: 10

        MyButton{
            width: 100
            height: 100
            radius: 50
            Layout.alignment: Qt.AlignHCenter

            Text {
                id: button0_text
                anchors.centerIn: parent
                text: qsTr("Hello")
                font.pixelSize: 15
            }

            onClicked: {
                if(button0_text.text == "Hello")
                    button0_text.text = "OK"
                else{
                    button0_text.text = "Hello"
                }
            }
        }

        MyButton{
            width: 100
            height: 50
            Layout.alignment: Qt.AlignHCenter

            Text {
                id: button1_text
                anchors.centerIn: parent
                text: qsTr("MyButton")
                font.bold: true
            }

            onClicked: {
                if(button1_text.text == "MyButton")
                    button1_text.text = "Makersweb.net"
                else{
                    button1_text.text = "MyButton"
                }
            }
        }
    }
}

 

이 글과 연관된 다른 글
  1. [2019/11/20] Qt3D의 QML 타입으로 3D렌더링 by makersweb (442)
  2. [2019/01/05] Qml 기본 컴포넌트 강좌 (2) by makersweb (3541)
  3. [2018/12/09] ShaderEffect QML Type 을 이용한 그래픽효과 by makersweb (839)
  4. [2018/12/05] Qml에서 커튼효과 구현 예제 - Shader Effects by 운영자 (498)
번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 12840
119 Qt로 데이터를 직렬화(serialization)하는 방법 makersweb 2020.08.04 10
118 최초의 Qt 6.0 스냅샷 제공 (First Qt 6.0 Snapshot Available) j2doll 2020.06.21 136
117 Qt MQTT 에 대해서 file makersweb 2020.06.02 136
» ShaderEffect QML Type을 이용한 버튼 클릭 효과 file makersweb 2020.05.22 114
115 Qt기반의 서버와 클라이언트간 SOAP(Simple Object Access Protocol) file makersweb 2020.05.11 115
114 재진입(Reentrancy) 및 스레드 안전성(Thread-Safety) makersweb 2020.04.19 130
113 Qt 5.15 및 Qt 6의 출시 일정 makersweb 2020.04.09 265
112 콘솔에서 사용자 입력받기 file makersweb 2020.03.22 362
111 컨테이너 클래스 - QVector makersweb 2020.03.17 249
110 Qt로 작성된 안드로이드 APP에 Splash Screen을 추가 file makersweb 2020.03.10 187
109 QLabel의 텍스트 색과 배경색을 변경 makersweb 2020.02.25 319
108 라즈베리파이4에 대한 Qt 5.14.1 크로스컴파일 file makersweb 2020.02.12 1351
107 QOpenGLWidget 을 투명하게 적용 file makersweb 2020.02.05 190
106 2020년에 변경되는 Qt 오퍼 (Qt offering changes 2020) [2] j2doll 2020.01.31 315
105 Qt로 XML 파싱 : Qt 6에서 업데이트된 (Parsing XML with Qt: Updates for Qt 6) [1] j2doll 2020.01.16 289
104 Qt 멀티 스레드 프로그래밍 시 유의해야 할 몇 가지 makersweb 2020.01.13 1187
103 ApplicationWindow 와 메뉴바(MenuBar)구성 file makersweb 2020.01.04 275
102 QThread 소개 및 예제 makersweb 2019.12.25 2636
101 Qt의 오픈소스 라이센스 소개 file makersweb 2019.12.15 2096
100 Qt for MCU 1.0 릴리즈 makersweb 2019.12.10 299