How to create a mask between a QML image and a QtQuick element

1

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)?

    
asked by anonymous 02.11.2016 / 13:05

1 answer

2

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

    
02.11.2016 / 18:15