qt - 如何将不透明蒙版应用于 QML 项目？

Question

我想要的外观和感觉是有一个纯色按钮，上面有像“Hello World”这样的文本，文本是完全透明的，背景通过按钮显示。

换句话说，将文本作为按钮元素上的透明蒙版。

Answer 1

这是一种方法:

// TB.qml
MouseArea {
  width: txt.contentWidth + 20
  height: txt.contentHeight + 10
  property alias text: txt.text
  property alias color: sh.color
  ShaderEffect {
    id: sh
    anchors.fill: parent
    property color color: "red" 
    property var source : ShaderEffectSource {
      sourceRect: Qt.rect(0, 0, sh.width, sh.height)
      sourceItem: Item {
        width: sh.width
        height: sh.height
        Text {
          id: txt
          anchors.centerIn: parent
          font.bold: true
          font.pointSize: 30
          text: "test"
        }
      }
    }
    fragmentShader:
        "varying highp vec2 qt_TexCoord0;
           uniform highp vec4 color;
           uniform sampler2D source;
           void main() {
               gl_FragColor = color * (1.0 - texture2D(source, qt_TexCoord0).w);
           }"
  }
}

使用它:

  TB {
    text: "HELLO WORLD!!!"
    color: "red"
    onClicked: console.log("hi world")
  }

结果:



按钮是红色的，灰色背景中的文本是灰色的，它将准确地显示按钮下方的任何内容。

显然，该按钮是简陋的，但该示例足以让您开始并根据您的需要实现某些东西。

这里的关键元素是自定义着色器，这是一个非常基本的着色器 - 它为每个片段着色并将蒙版应用为 alpha。显然，您可以使用 ShaderEffectSource将任何 QML 项转换为纹理，并替换 ShaderEffectSource与另一个 sampler 2D并以您想要的任何方式混合两种纹理，使用 alpha channel 或任何 RGB(如果您使用灰度蒙版)进行剪切。与相当有限的 OpacityMask 不同元素，这实际上将切入并显示下面的任何内容。