Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML Invert color of image using a mask?



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



  • 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
        }
    }
    
    

Log in to reply