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

结果：

但正如答案中提到的那样：

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

QML矩形隐藏重叠对象

1 个答案: