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

OpacityMask doesn't work with WebEngineView



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



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


Log in to reply