OpacityMask을 사용하면 소스 아이템을 다른 아이템으로 마스킹할 수 있다.
import QtQuick
import QtQuick.Window
import Qt5Compat.GraphicalEffects
Window {
visible: true
width: 500
height: 400
title: qsTr("QtQuick GraphicalEffects")
Rectangle {
id: area
anchors.fill: parent
color: "white"
Rectangle {
id: punchHole
width: 400
height: 300
anchors.centerIn: parent
color: "yellowgreen"
layer.enabled: true
layer.effect: OpacityMask{
maskSource: Rectangle {
width: punchHole.width
height: punchHole.height
radius: 15
}
}
/* Internel Content */
Text {
font.pixelSize: 20
text: qsTr("This property allows the effect output pixels to be cached \n in order to improve the rendering performance.")
anchors.centerIn: parent
color: "black"
horizontalAlignment: Text.AlignHCenter
}
}
}
}
다음과 같은 이미지를 넣어보자.
단지 Image
아이템을 사용하고 source
를 지정하면 된다.
import QtQuick
import QtQuick.Window
import Qt5Compat.GraphicalEffects
Window {
visible: true
width: 500
height: 400
title: qsTr("QtQuick GraphicalEffects")
Rectangle {
id: area
anchors.fill: parent
color: "white"
Image {
id: punchHole
width: 400
height: 300
anchors.centerIn: parent
source: "qrc:/sky.jpg"
layer.enabled: true
layer.effect: OpacityMask{
maskSource: Rectangle {
width: punchHole.width
height: punchHole.height
radius: 15
}
}
/* Internel Content */
Text {
font.pixelSize: 20
text: qsTr("This property allows the effect output pixels to be cached \n in order to improve the rendering performance.")
anchors.centerIn: parent
color: "greenyellow"
horizontalAlignment: Text.AlignHCenter
}
}
}
}
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
공지 | Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 | 운영자 | 2019.01.05 | 86882 |
8 |
ShaderEffect QML Type 을 이용한 그래픽효과
![]() | makersweb | 2018.12.09 | 2200 |
7 |
Qml에서 커튼효과 구현 예제 - Shader Effects
![]() | 운영자 | 2018.12.05 | 1175 |
6 |
QML에서 동적으로 텍스트 다국어 처리
![]() | makersweb | 2018.11.04 | 4298 |
5 |
Qml에서 키보드 입력 이벤트 핸들링
![]() | makersweb | 2018.08.09 | 3700 |
4 | Qml 및 C++개발시 유용한 팁 [3] | makersweb | 2018.04.06 | 6119 |
3 | QML에서 undefined를 확인하는 방법 | makersweb | 2017.11.29 | 1546 |
2 |
Qml 사용자 ScrollBar 구현
![]() | makersweb | 2015.07.24 | 6275 |
1 | z-order 를 컨트롤 하기위한 방법 | makersweb | 2015.05.13 | 6657 |