Can Items be told to subtract rather than add when laying over each other?

fcarney

I want to layer Items in QML to achieve custom masks:

Rectangle {
        id: maskrect

        visible: true

        width: 256
        height: width

        color: "transparent"

        Rectangle {
            anchors.centerIn: parent

            width: parent.width * 0.9
            height: width
            radius: width

            color: "white"

            Rectangle {
                anchors.centerIn: parent

                width: parent.width * 0.8
                height : width
                radius: width

                color: "transparent"
            }
        }
    }

I want the last Rectangle to replace the pixels left by the middle Rectangle with transparent pixels. I want to use this to create custom masks for use with OpacityMask.

Things I have looked into:

replacing alpha channel with Item - could not find a way to do this
looking for Item mode that would allow changing the effects of laying Items - did not see any kind of logical operations settings for graphics
ShaderEffect - seems overkill, but it might be the only real option for this

Any other ideas for achieving a custom mask? Maybe SVGShape might be an option.

fcarney

This is kind of a proof of concept. It seems really messy:

Rectangle {
        id: maskrect

        visible: false

        width: 256
        height: width

        color: "black"

        Rectangle {
            id: maskrectcir

            anchors.centerIn: parent

            width: parent.width * 0.9
            height: width
            radius: width

            color: "white"

            Rectangle {
                anchors.centerIn: parent

                width: parent.width * 0.8
                height : width
                radius: width

                color: "black"
            }
        }
    }

    Rectangle {
        id: rotategradient

        visible: false

        width: maskrect.width
        height: width

        gradient: Gradient {
            GradientStop {
                position: 0.0
                color: "white"
            }
            GradientStop {
                position: 1.0
                color: "blue"
            }
        }
    }

    ShaderEffectSource {
        id: rotategradient_source
        sourceItem: rotategradient
    }

    ShaderEffectSource {
        id: maskrect_source
        sourceItem: maskrect
    }

    ShaderEffect {
        anchors.fill: rotategradient

        visible: true

        property variant source: rotategradient_source
        property variant maskSource: maskrect_source
        fragmentShader: "
            varying highp vec2 qt_TexCoord0;
            uniform highp float qt_Opacity;
            uniform lowp sampler2D source;
            uniform lowp sampler2D maskSource;
            void main(void) {
                gl_FragColor = vec4(texture2D(source, qt_TexCoord0.st).rgb * texture2D(maskSource, qt_TexCoord0.st).r, texture2D(maskSource, qt_TexCoord0.st).r);
            }
        "

        RotationAnimation on rotation {
            loops: Animation.Infinite
            from: 0
            to: 360
        }
    }