OpacityMask doesn't work with WebEngineView
Unsolved
QML and Qt Quick
-
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.