qt5.7 QML快速半透明矩形，在一侧有圆角

Question

我想要一个半透明的矩形形状使用Qt快速QML，但圆角只在一面。

这就是我想要的矩形形状。如果它没有被看穿，我可能只会重叠两个矩形，一个有圆角，一个没有。然而，这并不适用于透明，因为重叠变得更暗。

     ----------|
   /           |
 /             | 
|              |
|              |
|              |
              | 
              |   
     ----------|

有人有什么想法吗?

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，对此已经有了类似的答案。