QT 5.7 QML 快速半透明矩形，一侧有圆角

Posted 2023-03-05

【中文标题】QT 5.7 QML 快速半透明矩形，一侧有圆角

【英文标题】：QT 5.7 QML quick semi-transparent rectangle, with rounded corners on one side

【发布时间】：2017-03-14 06:02:28

【问题描述】：

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

这是我想要的矩形形状。如果看不透，我可能只会重叠 2 个矩形，一个有圆角，一个没有。但是，这不适用于透明度，因为重叠变得更暗。

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

有人有什么想法吗？

【问题讨论】：

我认为唯一的方法是Canvas

【参考方案1】：

您可以使用clipping（参见performance docs）来切掉单个圆角矩形的角：

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
        
    

您也可以使用layers 来避免重叠透明度问题：

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，已经有一个类似的answer。