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