QML - 使用背景颜色掩盖项目颜色

Question

我正在尝试重现 Android 计时器选择器控件的行为，如图所示，当手柄位于其上方（也部分）时，时间数字会更改颜色（从黑色变为白色）。有人知道是否可以使用 QML 获得相同的效果，如果有的话，如何实现？

Answer 1

正如其他人所指出的，如果您定义了数字的两个版本，例如，您可以使用

Qt5Compat.GraphicalEffects

“黑色”版本和“红色”版本 您可以使用

OpacityMask

在“黑色”版本之上绘制“红色”版本，但仅限于满足

OpacityMask

的区域。在本例中，

OpacityMask

设置为

red

圆圈：

import QtQuick
import QtQuick.Controls
import QtQuick.Shapes
import Qt5Compat.GraphicalEffects
Page {
    Rectangle {
        anchors.centerIn: parent
        width: 200
        height: width
        color: "#ddd"
        radius: width / 2
        OutlineText {
            x: 20
            y: 110
            text: "41"
            font.pointSize: 10
        }
        OutlineText {
            x: 45
            y: 150
            text: "35"
            font.pointSize: 10
            font.bold: true
        }
        Item {
            id: circleMask
            anchors.fill: parent
            Rectangle {
                x: 20
                y: 115
                width: 25
                height: width
                color: "red"
                radius: width / 2
            }
        }
        Item {
            id: overlay
            anchors.fill: parent
            visible: false
            OutlineText {
                x: 20
                y: 110
                text: "41"
                color: "red"
                font.pointSize: 10
            }
        }
        Shape {
            ShapePath {
                strokeColor: "red"
                strokeWidth: 4
                startX: 100; startY: 100
                PathLine { x: 30; y: 130 }
            }
        }
        OpacityMask {
            anchors.fill: parent
            source: overlay
            maskSource: circleMask
        }
    }
}

// OutlineText.qml
import QtQuick
import QtQuick.Controls

Label {
    color: "black"
    property color outlineColor: "white"
    Repeater {
        model: 9
        Label {
            x: index % 3 - 1
            y: Math.floor(index / 3) - 1
            text: parent.text
            font.pointSize: parent.font.pointSize
            font.family: parent.font.family
            font.bold: parent.font.bold
            color: outlineColor
            z: -2
        }
    }
}

您可以在线尝试！