我正在尝试在 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" }
}
}
当我更新值(鼠标区域事件)时,我改变了 powerImage 具有以下功能:
var maxWidth = powerImage.parent.width
var currentWidth = (maxWidth * barPercentage) / 100
if (currentWidth >= maxWidth){
currentWidth = maxWidth
}
问题 当栏的百分比达到较低值(如 10% )时,我无法将栏放入背景中,如下所示:
您可以看到酒吧不再有鳍了。 我知道问题与矩形 ( powerImage ) 及其半径有关。但我不知道如何解决这个问题。 很明显,使用 SVG 它非常简单,但在这种情况下,我不能使用它。 当它只在背景矩形内时,有没有办法显示它?
最佳答案
很遗憾,无法在非矩形区域上使用 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.
关于qt - QML 矩形隐藏重叠对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49321133/