QT 5.7 QML快速半透明矩形，其中一侧为圆角

Question

我想使用Qt Quick QML创建一个半透明的矩形，但只有一侧是圆角。

这大概就是我想要的矩形形状。如果不需要透明度，我可能会重叠两个矩形，一个带有圆角，一个没有圆角。然而，这在透明度方面行不通，因为重叠部分会变得更暗。

     ----------|
   /           |
 /             | 
|              |
|              |
|              |
 \             | 
   \           |   
     ----------|

有人有任何想法吗？

- James

---

我认为唯一的方法是使用“Canvas”。 - folibis

Answer 1

您可以使用裁剪（请参阅性能文档），将单个圆角矩形的角截断：

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    width: 300
    height: 300
    visible: true

    Item {
        width: 100
        height: 100
        anchors.centerIn: parent
        clip: true

        Rectangle {
            anchors.fill: parent
            anchors.rightMargin: -radius
            radius: 10
            color: "navajowhite"
            opacity: 0.5
        }
    }
}

您还可以使用图层来避免重叠的透明度问题：

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    width: 300
    height: 300
    visible: true

    Item {
        width: 100
        height: 100
        opacity: 0.5
        layer.enabled: true
        anchors.centerIn: parent

        Rectangle {
            color: "navajowhite"
            radius: 10
            anchors.fill: parent
        }
        Rectangle {
            color: "navajowhite"
            anchors.fill: parent
            anchors.leftMargin: 10
        }
    }
}

如@folibis所述，您还可以使用Canvas，其中已经有一个类似的答案。

- Mitch