qt - QML 矩形隐藏重叠对象

Question

我正在尝试在 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 它非常简单，但在这种情况下，我不能使用它。当它只在背景矩形内时，有没有办法显示它？

Answer 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
        // ...
    }
}

结果:

但正如答案中提到的:

But using it will be GPU consuming task as the inner item and mask have to be drawn on buffer first and then redrawn on window, so not very good for old mobile or weak embedded devices.