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 | 86142 |
8 | QML 에서 QR코드 생성 | makersweb | 2021.08.20 | 894 |
7 | QML 코딩 규칙 | makersweb | 2021.09.05 | 3264 |
6 | QML에서 Websocket 서버와 통신 | makersweb | 2021.09.18 | 834 |
5 | QML에서 앵커(anchors)로 위치 지정 | makersweb | 2021.10.05 | 3871 |
4 | Binding 타입으로 객체 속성 간 묶기 | makersweb | 2022.03.04 | 428 |
» | OpacityMask 예제 | makersweb | 2023.01.26 | 649 |
2 | QML에서 D-Bus 통신 | makersweb | 2023.03.15 | 701 |
1 | QtQuick 애플리케이션에 Rive 애니메이션 통합 | makersweb | 2024.03.31 | 412 |