QML Invert color of image using a mask?

[fcarney]

In the past one trick to always make a cursor/mask visible was to invert the color of the mask where it overlays on an image. So it did not matter what colors were in the image you could see the cursor. I am not seeing a way to do this with graphical effects. The opacity mask was promising, but I cannot do this for just a portion of the image. (might be able to do a snapshot of the image where the cursor is and do an opacity mask there)

So, is this going to need to be a custom shader?

[fcarney]

Not sure this will work for me, but it is possible in a way (really messy):

import QtQuick 2.15
import QtQuick.Window 2.15
import QtGraphicalEffects 1.15

Window {
    id: root

    width: 512
    height: 512
    visible: true
    title: qsTr("Mask Invert")

    Image {
        id: mapimage

        width: parent.width
        height: parent.height

        source: "testimagesquare.png"

        visible: true
    }

    MouseArea {
        anchors.fill: mapimage

        hoverEnabled: true

        onPositionChanged: {
            maskposx = mouseX - masksizew/2
            maskposy = mouseY - masksizeh/2
        }
    }

    Image {
        id: mapimagesub

        width: masksizew
        height: masksizeh

        source: "testimagesquare.png"
        sourceSize.width: root.width
        sourceSize.height: root.height

        sourceClipRect: Qt.rect(maskposx, maskposy, masksizew, masksizeh)

        visible: false
    }

    property real maskposx: 128
    property real maskposy: 128
    property real masksizew: 128
    property real masksizeh: 128

    Image {
        id: subsourceimage

        width: masksizew
        height: masksizeh
    }

    Image {
        id: maskimage

        width: subsourceimage.width
        height: subsourceimage.height

        source: "crosshairround.svg"

        visible: false
    }

    OpacityMask {
        id: opmask

        x: maskposx
        y: maskposy

        width: masksizew
        height: masksizeh

        source: huesat //mapimagesub
        maskSource: maskimage

        invert: false
    }

    HueSaturation {
        id: huesat

        anchors.fill: mapimagesub

        source: mapimagesub

        hue: 0.5
        //lightness: -0.2
        //saturation: 0.5

        visible: false
    }
}