使用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