한국어
Qt
 

QML and Qt Quick OpacityMask 예제

makersweb 2023.01.26 21:03 조회 수 : 67

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
            }
        }
    }
}

 

OpacityMask.png


다음과 같은 이미지를 넣어보자.

sky.jpg

단지 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
            }
        }
    }
}

 

OpacityMask1.png

번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 79165
171 QML에서 D-Bus 통신 file makersweb 2023.03.15 31
170 Qt 하이브리드 애플리케이션(Hybrid App) 개발 file makersweb 2023.02.08 147
169 Widgets(C++) 기반의 기본 스타일을 Dark 테마 및 Material 디자인 스타일로 바꾸기 file makersweb 2023.01.28 234
» OpacityMask 예제 file makersweb 2023.01.26 67
167 QProcess 예제 (프로그램 재시작) file makersweb 2023.01.25 114
166 하드디스크 드라이브 여유 공간 계산 file makersweb 2023.01.15 68
165 Qt Property(속성) 시스템 makersweb 2023.01.08 188
164 VTK 를 사용해서 강력한 시각화(3D, Plotting, Chart)Qt 응용프로그램 개발하기 file makersweb 2022.10.16 679
163 QProcess 보안 권고 리뷰 file makersweb 2022.09.18 159
162 QMake 프로젝트를 CMake 프로젝트로 변환 with qmake2cmake makersweb 2022.09.17 262
161 Qt Safe Renderer 개요 file makersweb 2022.09.08 101
160 clazy 로 13개의 시그널, 슬롯 오류 해결 makersweb 2022.08.23 164
159 Qt 스마트 포인터 (QSharedPointer, QScopedPointer, QPointer) makersweb 2022.08.18 419
158 Qt 6.4에 추가될 Qt Quick 3D Physics file makersweb 2022.08.07 155
157 HTTPS URL을 연결할 때 SslHandshakeFailedError 오류 makersweb 2022.07.31 158
156 단일 인스턴스 Qt 응용 프로그램(Single-instance Application) makersweb 2022.06.23 552
155 Qt로 작성된 iOS 앱에서 시리얼 통신 file makersweb 2022.04.30 455
154 VirtualKeyboard 스타일 커스터 마이징 makersweb 2022.03.13 340
153 성능 고려 및 제안 사항 makersweb 2022.03.07 355
152 Binding 타입으로 객체 속성 간 묶기 makersweb 2022.03.04 265