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

Asked

Viewed 45 times

1

How to create a mask between an image imported to QML (e.g., a png icon, jpeg, svg, etc...), and a user interface element in the background (e.g.: a re-click)?

qt qml

1 answer

3


You can use Qml’s 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: http://doc.qt.io/qt-5/qml-qtgraphicaleffects-opacitymask.html

Browser other questions tagged qt qml

You are not signed in. Login or sign up in order to post.