首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使部分区域透明,其余区域显示半透明?

如何使部分区域透明,其余区域显示半透明?
EN

Stack Overflow用户
提问于 2018-12-27 11:07:02
回答 1查看 99关注 0票数 1

我正在尝试在图像中创建一个可选择的矩形。

代码语言:javascript
运行
复制
Image {
    id: image
    Rectangle { //full-transparent like a viewport
        id: rect
    }
}

这看起来像使用屏幕截图,您选择的区域是全透明的,但其余的是半透明(或模糊)。

我发现opacitymask有点类似,但我希望其余的区域显示为半透明,而不仅仅是白色。

此项目的完整代码:https://github.com/arkceajin/QtDemos/tree/master/CropBox

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-27 15:32:57

对于这些情况,您必须使用ShaderEffect:

代码语言:javascript
运行
复制
import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("ShaderEffect Example")

    Image {
        id: image
        source: "qrc:/dog.png"
        anchors.centerIn: parent

        layer.enabled: true
        layer.effect: ShaderEffect {
            property real alpha: 0.4
            property rect sourceRect: Qt.rect(width/4, height/4, width/2, height/2)

            property real xStep: 1/width
            property real yStep: 1/height

            fragmentShader: "
                uniform lowp sampler2D source;
                varying mediump vec2 qt_TexCoord0;
                uniform lowp float qt_Opacity;

                uniform highp float alpha;
                uniform highp vec4 sourceRect;

                uniform highp float xStep;
                uniform highp float yStep;

                bool insideBox(vec2 topLeft, vec2 bottomRight, vec2 point){
                    vec2 s = step(topLeft, point) - step(bottomRight, point);
                    return (s.x * s.y) > 0.0;
                }

                void main() {
                    vec2 topLeft = vec2(sourceRect.x*xStep, sourceRect.y*yStep);
                    vec2 bottomRight = topLeft + vec2(sourceRect.z*xStep, sourceRect.w*yStep);
                    gl_FragColor = texture2D(source, qt_TexCoord0) * qt_Opacity;
                    if(!insideBox(topLeft, bottomRight, qt_TexCoord0))
                        gl_FragColor *= alpha;

                }
            "
        }
    }
}

输出:

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53939313

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档