InvertedOpacityMask.qml

InvertedOpacityMask.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt5Compat.GraphicalEffects

Page {
    Image {
        id: background
        anchors.fill: parent
        source: "https://i.stack.imgur.com/iuLXK.png"
    }

    Image {
        id: original
        anchors.fill: parent
        source: "https://user-images.githubusercontent.com/6844287/201269084-3714d9e6-43c6-4c20-b147-c7be6ef4aa33.jpg"
        visible: false
    }

    OpacityMask {
        anchors.fill: parent
        maskSource: newMask
        source: original
    }

    Image {
        id: sfg
        source: "https://i.stack.imgur.com/xFkfS.png"
        x: parent.width/2-(sfg.width/2)
        y: parent.height/2-(sfg.height/2)
        width: 175
        height: 125
        sourceSize: Qt.size(width, height)
        visible: true
    }

    Item {
        id: newMask
        anchors.fill: parent
        visible: false
        Image {
            id: rect
            x: sfg.x
            y: sfg.y
            width: sfg.width
            height: sfg.height
            //source: "sfgmask.png"
            source: "https://i.stack.imgur.com/IU4BT.png"
        }
    }

    MouseArea {
        id: mouseArea1
        anchors.fill: parent
        hoverEnabled:true
        onPositionChanged:{
            if(mouseX>=(sfg.width/2) && mouseX<(background.width - (sfg.width/2))) {
                sfg.x = mouseX - (sfg.width/2);
            }

            if(mouseY>=(sfg.height/2) && mouseY<(background.height - (sfg.height/2))) {
                sfg.y = mouseY - (sfg.height/2);
            }
        }
    }
}