Qt Quick 圓角圖片、異形圖片的合成

圖片:


1.png:



up.png:



sanpan.png:

mask圖片用來描述輪廓,裏面的內容無所謂,需要的是他的透明不規則區域。
src圖片建議使用矩形的~

import QtQuick 2.7
import QtCanvas3D 1.1
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0
Window {
    title: qsTr("c3d2")
    width: 1280
    height: 768
    visible: true



    Item {
        width: 300
        height: 300

        Image {
            id: bug
            source: "qrc:/sanpan.png"
            sourceSize: Qt.size(parent.width, parent.height)
            anchors.fill: parent
            smooth: true
            visible: false
        }

                //輪廓
        Image {
            id: mask
            source: "qrc:/1.png"
            anchors.fill: parent
            sourceSize: Qt.size(parent.width, parent.height)
            smooth: true
            visible: false

        }

        OpacityMask {
            anchors.fill: bug
            source: bug
            maskSource: mask
        }
    }


}

三胖更帥了…

        //輪廓
        Image {
            id: mask
            source: "qrc:/up.png"
            anchors.fill: parent
            sourceSize: Qt.size(parent.width, parent.height)
            smooth: true
            visible: false

        }

.
繪製圓形可以不用圖片,這樣內存開銷會節省

        Rectangle{
            id:mask
            smooth: true
            visible: false
            anchors.fill: parent
            radius: height/2
        }

src和mask可以是任何item的派生組件。
例子:src爲矩形 mask爲箭頭形透明圖

    Item {
        width: 300
        height: 300

        Rectangle{
            id:bug
            anchors.fill: parent
            smooth: true
            visible: false
            color: "red"
        }

        //輪廓
        Image {
            id: mask
            source: "qrc:/up.png"
            anchors.fill: parent
            sourceSize: Qt.size(parent.width, parent.height)
            smooth: true
            visible: false

        } 

        OpacityMask {
            anchors.fill: bug
            source: bug
            maskSource: mask
        }
    }