如何解决使用QML OpacityMask修整覆盖矩形的上角
我正在尝试创建一个圆角矩形,顶部用纯色填充,而下部用文本填充。我将另一个矩形(红色的 innerTopRectangle )覆盖在圆角矩形的上部(白色,带有黑色边框的 outerRectangle )。但是,不是舍入我的innerTopRectangle的顶部,而是舍入底部的角:
我希望 innerTopRectangle 在顶部四舍五入(剪切并在 outerRectangle 边框之内),但在底部平坦。
有人可以提出什么问题吗?从逻辑上讲,我的不透明蒙版顶部应该锚定到我的innerTopRectangle上,并且由于innerTopRectangle不那么高,因此仅应遮盖顶部角。
Rectangle {
id: outerRectangle
width: (parent.width / 2) - 5 - 10;
height: 40
anchors.margins: 10
border {
width: 2
color: "#120e0d"
}
clip: true
radius: 5
Rectangle {
id: innerTopRectangle
anchors {
top: parent.top
left: parent.left
right: parent.right
}
layer.enabled: true
layer.effect: OpacityMask {
anchors.top: outerRectangle.top
maskSource: outerRectangle
}
height: parent.height - levelName.height
color: "red"
} // Inner top rectable
Text {
id: levelName
anchors {
top: innerTopRectangle.bottom
left: parent.left
right: parent.right
}
text: name
} // Text
} // Outer rectangle
解决方法
我认为您完全不需要OpacityMask就可以轻松实现所需的效果,因为顶部是简单的纯色,您只需向innerTopRectangle添加一个半径,然后在其底部绘制另一个(非圆形)矩形边缘覆盖那里的圆角。我也摆脱了剪裁,因为那是不必要的。
Rectangle {
id: outerRectangle
width: (parent.width / 2) - 5 - 10;
height: 40
anchors.margins: 10
border {
width: 2
color: "#120e0d"
}
radius: 5
Rectangle {
id: innerTopRectangle
anchors {
top: parent.top
left: parent.left
right: parent.right
}
radius: 5
height: parent.height - levelName.height
color: "red"
Rectangle
{
// This covers the bottom rounded corners
anchors.bottom: parent.bottom
width: parent.width
height: parent.radius
color: parent.color
}
} // Inner top rectable
Text {
id: levelName
anchors {
top: innerTopRectangle.bottom
left: parent.left
right: parent.right
}
text: name
} // Text
} // Outer rectangle
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。