Qt Quick<OpacityMask> 圆角图片、异形图片的合成

图片:

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