How to create a mask between an imported QML image (eg a png, jpeg, svg, etc ...) icon, and a user interface element in the background (eg a rectangle)?
How to create a mask between an imported QML image (eg a png, jpeg, svg, etc ...) icon, and a user interface element in the background (eg a rectangle)?
You can use the Qaci OpacityMask. Example:
import QtQuick 2.0
import QtGraphicalEffects 1.0
Item {
width: 300
height: 300
Image {
id: bug
source: "images/bug.jpg"
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
}
Image {
id: mask
source: "images/butterfly.png"
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
}
OpacityMask {
anchors.fill: bug
source: bug
maskSource: mask
}
}
Documentation: link