如何将不透明蒙版应用于 QML 项目? [英] How to apply opacity mask to a QML item?

问题描述

我想要的外观和感觉是有一个纯色按钮，上面的文字就像Hello World"一样，文字完全透明，背景通过按钮显示.

The look and feel I'm trying to go for is to have a solid color button, and text on it like "Hello World" where the text is completely transparent, and the background shows through the button.

换句话说，将文本作为按钮元素上的透明掩码.

In other words, having text as a transparency mask on a button element.

推荐答案

您可以使用 layer 附加属性来实现，如下所示，无需使用 OpacityMask.
你也没有任何限制，你可以使用任何 qml 项目，使用任何 QtQuick.Controls 并像往常一样设置样式:)

You can achieve that using layer attached property as follow without using OpacityMask.
Also you does not any limitation and you can use any qml item, use any QtQuick.Controls and style it as usual :)

Image {
    id: bk
    source: "http://l7.alamy.com/zooms/7b6f221aadd44ffab6a87c234065b266/sheikh-lotfollah-mosque-at-naqhsh-e-jahan-square-in-isfahan-iran-interior-g07fw2.jpg"
}

Button {
    id: button
    anchors.centerIn: bk
    width: 210; height: 72
    visible: true
    opacity: 0.0
    layer.enabled: true
    layer.smooth: true
    onClicked: console.log("Clicked")
}

Rectangle {
    id: _mask
    anchors.fill: button
    color: "transparent"
    visible: true
    Text {
        font { pointSize: 20; bold: true }
        anchors.centerIn: parent
        text: "Hello World!"
    }

    layer.enabled: true
    layer.samplerName: "maskSource"
    layer.effect: ShaderEffect {
        property variant source: button
        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) * (1.0-texture2D(maskSource, qt_TexCoord0.st).a) * qt_Opacity;
                }
            "
    }
}

这篇关于如何将不透明蒙版应用于 QML 项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！