한국어
Qt
 

QML and Qt Quick OpacityMask 예제

makersweb 2023.01.26 21:03 조회 수 : 98

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 80515
171 QML에서 D-Bus 통신 file makersweb 2023.03.15 136
170 Qt 하이브리드 애플리케이션(Hybrid App) 개발 file makersweb 2023.02.08 230
169 Widgets(C++) 기반의 기본 스타일을 Dark 테마 및 Material 디자인 스타일로 바꾸기 file makersweb 2023.01.28 348
» OpacityMask 예제 file makersweb 2023.01.26 98
167 QProcess 예제 (프로그램 재시작) file makersweb 2023.01.25 212
166 하드디스크 드라이브 여유 공간 계산 file makersweb 2023.01.15 116
165 Qt Property(속성) 시스템 makersweb 2023.01.08 356
164 VTK 를 사용해서 강력한 시각화(3D, Plotting, Chart)Qt 응용프로그램 개발하기 file makersweb 2022.10.16 778
163 QProcess 보안 권고 리뷰 file makersweb 2022.09.18 193
162 QMake 프로젝트를 CMake 프로젝트로 변환 with qmake2cmake makersweb 2022.09.17 344
161 Qt Safe Renderer 개요 file makersweb 2022.09.08 131
160 clazy 로 13개의 시그널, 슬롯 오류 해결 makersweb 2022.08.23 219
159 Qt 스마트 포인터 (QSharedPointer, QScopedPointer, QPointer) makersweb 2022.08.18 534
158 Qt 6.4에 추가될 Qt Quick 3D Physics file makersweb 2022.08.07 193
157 HTTPS URL을 연결할 때 SslHandshakeFailedError 오류 makersweb 2022.07.31 182
156 단일 인스턴스 Qt 응용 프로그램(Single-instance Application) makersweb 2022.06.23 582
155 Qt로 작성된 iOS 앱에서 시리얼 통신 file makersweb 2022.04.30 508
154 VirtualKeyboard 스타일 커스터 마이징 makersweb 2022.03.13 360
153 성능 고려 및 제안 사항 makersweb 2022.03.07 393
152 Binding 타입으로 객체 속성 간 묶기 makersweb 2022.03.04 291