OpacityMask doesn't work with WebEngineView

arakan94

Hi,
I need to mask out part of website rendered with WebEngineView. I've tried OpacityMask, but it doesn't work.. The code should be correct as it works with Image.

Item {
    width: 640
    height: 500

//        Image {
//            id: image
//            anchors.fill: parent
//            visible: false
//            source: "file:///home/david/Pictures/cat.jpg"
//        }

    WebEngineView {
        id: webView
        anchors.fill: parent
        visible: false
        url: "https://google.com"
    }

    Rectangle {
        id: mask
        anchors.fill: parent
        color: "#00000000"
        visible: false
        Rectangle {
            height: 200
            width: 200
            x: 50
            y: 50
            color: "black"
        }
    }

    OpacityMask {
        anchors.fill: webView //image
        source: webView //image
        maskSource: mask
    }
}

Any advice?

arakan94

Workaround is to use ShaderEffect. Following code works:

Item {
    width: 640
    height: 500

    WebEngineView {
        id: webView
        anchors.fill: parent
        //visible: false
        url: "https://google.com"
    }

    Rectangle {
        id: maskRectangle
        anchors.fill: parent
        color: "transparent"
        visible: false
        Rectangle {
            height: 200
            width: 200
            x: 150
            y: 50
            color: "black"
        }
    }

    ShaderEffectSource {
        id: source
        sourceItem: webView
    }

    ShaderEffectSource {
        id: mask
        sourceItem: maskRectangle
    }

    layer.enabled: true
    layer.effect: ShaderEffect {
        property variant source: source
        property variant maskSource: mask
        fragmentShader: "
            varying highp vec2 qt_TexCoord0;
            uniform highp float qt_Opacity;
            uniform lowp sampler2D source;
            uniform lowp sampler2D maskSource;
            void main(void) {
                gl_FragColor = texture2D(source, qt_TexCoord0.st) * (texture2D(maskSource, qt_TexCoord0.st).a) * qt_Opacity;
            }"
    }
}

Still, I would like to use OpacityMask to get nice and clear QML code without shader.