qt - 使用 QML OpacityMask 对覆盖矩形的上角进行四舍五入

Question

我正在尝试创建一个圆角矩形，顶部填充纯色，下部填充文本。我正在用另一个矩形（红色的innerTopRectangle ）覆盖圆角矩形的上部（白色的outerRectangle和黑色的边框）。但是，不是舍入我的 innerTopRectangle 的顶部，而是舍入底部的角：

我希望innerTopRectangle在顶部四舍五入（裁剪并在outerRectangle边框内），但在底部平坦。

有人可以提出什么问题吗？从逻辑上讲，我认为我的 opacitymask 顶部应该锚定到我的 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

Answer 1

我认为您完全可以在没有 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