한국어
Qt
 

QML and Qt Quick OpacityMask 예제

makersweb 2023.01.26 21:03 조회 수 : 706

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 86601
39 Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 14120
38 싱글터치 스크린 및 임베디드 리눅스 기반에서 Qt 터치입력 makersweb 2018.12.24 1415
37 ShaderEffect QML Type 을 이용한 그래픽효과 file makersweb 2018.12.09 2149
36 Qml에서 커튼효과 구현 예제 - Shader Effects file 운영자 2018.12.05 1127
35 안드로이드 Qt 프로그래밍 file makersweb 2018.11.30 8915
34 리눅스에서 Qt4.8기반 어플리케이션의 한글입력 file makersweb 2018.11.29 2472
33 QML에서 동적으로 텍스트 다국어 처리 file makersweb 2018.11.04 4254
32 Qt Installer Framework - 패키징, 설치프로그램 제작 file makersweb 2018.10.14 11748
31 Qt 응용프로그램 배포(windows) file makersweb 2018.10.10 11511
30 소스코드에서 환경변수 가져오기와 설정하기 makersweb 2018.10.08 1831
29 표를 만들고 PDF문서로 출력하기 file makersweb 2018.09.30 1616
28 Qml에서 키보드 입력 이벤트 핸들링 file makersweb 2018.08.09 3642
27 Qml 어플리케이션 정적 빌드 file makersweb 2018.07.27 2147
26 Qt Bluetooth 관련 기능 확인 사항 makersweb 2018.07.10 777
25 Qml 및 C++개발시 유용한 팁 [3] makersweb 2018.04.06 6064
24 Qt Version확인 방법 makersweb 2018.03.29 3562
23 초보자를 위한 첫번째 프로젝트 - QML로 만드는 Hello World file makersweb 2018.03.16 14598
22 Windows에서 라즈베리파이3 Qt 어플리케이션 개발 및 원격 실행 file makersweb 2018.02.23 6110
21 Windows에서 라즈베리파이3용 Qt5.10.0 크로스컴파일 [20] file makersweb 2018.02.23 13157
20 Windows환경에서 mingw로 Qt 5.10 정적(static)빌드 file makersweb 2018.02.01 5739