QML 矩形隐藏重叠对象答案

【问题标题】：QML Rectangle Hide overlapping ObjectsQML 矩形隐藏重叠对象
【发布时间】：2018-03-16 12:46:24
【问题描述】：

我正在尝试在 QML 中实现一个简单的滑动条。这是我必须遵循的先决条件：没有 SVG 图像（对于某些 BR，我无法在此讨论）。

 Rectangle {
            id: backgroundPower
            anchors.fill: parent
            color: "#a2aaae"
            radius: 50

            MouseArea {
                id: progressArea
                anchors.fill: parent

                onPositionChanged: {
                    updateValue(progressArea.mouseX)
                }
                onReleased:  {
                    updateValue(progressArea.mouseX)
                }

                onClicked: updateValue(progressArea.mouseX)
            }

            Rectangle {
                id: powerImage
                width: calculateWidth()
                radius: 100
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.top: parent.top
                LinearGradient {
                    id: defaultGradient
                    anchors.fill: parent
                    source: powerImage
                    start: Qt.point(0, 0)
                    end: Qt.point(0, powerImage.height)
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: "#46c0e4" }
                        GradientStop { position: 0.50; color: "#0583ca" }
                        GradientStop { position: 0.95; color: "#fbffff" }
                        GradientStop { position: 1.0; color: "#fbffff" }
                    }
                }

当条形为 100% 时，我使用此代码获得的结果如下：

当我更新值（鼠标区域事件）时，我改变了 powerImage 功能：

var maxWidth = powerImage.parent.width
    var currentWidth = (maxWidth * barPercentage) / 100
    if (currentWidth >= maxWidth){
        currentWidth = maxWidth
    }

问题当条形的百分比达到较低值（例如 10% ）时，我无法将条形放入背景中，如下所示：

你可以看到酒吧不再结束了。我知道问题与矩形（ powerImage ）及其半径有关。但我不知道如何解决这个问题。显然，使用 SVG 非常简单，但在这种情况下，我不能使用它。当它只在背景矩形内时，有没有办法显示它？

【问题讨论】：

标签： qt qml linear-gradients sliding

【解决方案1】：

很遗憾，不能在非矩形区域使用clip: true。

但是在this answer之后，你可以使用OpacityMask：

Rectangle {
    id: backgroundPower
    anchors.fill: parent
    color: "#a2aaae"
    radius: 50

    MouseArea {
        // ...
    }
}

Item {
    anchors.fill: backgroundPower
    layer.enabled: true
    layer.effect: OpacityMask {
        maskSource: backgroundPower
    }

    Rectangle {
        id: powerImage
        // ...
    }
}

结果：

但正如答案中提到的：

但是使用它会消耗 GPU 的任务，因为内部项目和掩码必须先在缓冲区上绘制，然后在窗口上重新绘制，所以对于旧的移动设备或弱嵌入式设备来说不是很好。

【讨论】：