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은 다음과 같이 커튼효과를 낼 수 있다.
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
공지 | Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 | 운영자 | 2019.01.05 | 86930 |
8 | ShaderEffect QML Type 을 이용한 그래픽효과 | makersweb | 2018.12.09 | 2210 |
» | Qml에서 커튼효과 구현 예제 - Shader Effects | 운영자 | 2018.12.05 | 1184 |
6 | QML에서 동적으로 텍스트 다국어 처리 | makersweb | 2018.11.04 | 4309 |
5 | Qml에서 키보드 입력 이벤트 핸들링 | makersweb | 2018.08.09 | 3705 |
4 | Qml 및 C++개발시 유용한 팁 [3] | makersweb | 2018.04.06 | 6135 |
3 | QML에서 undefined를 확인하는 방법 | makersweb | 2017.11.29 | 1552 |
2 | Qml 사용자 ScrollBar 구현 | makersweb | 2015.07.24 | 6281 |
1 | z-order 를 컨트롤 하기위한 방법 | makersweb | 2015.05.13 | 6665 |