如何使qml视图的特定区域透明答案

【问题标题】：How to make a particular area of qml view transparent如何使qml视图的特定区域透明
【发布时间】：2023-04-04 10:13:01
【问题描述】：

有一个qml文件是这样的：

Item {
    width: 800
    height: 600

    Image {
        id: background
        width: 800
        height: 600
        source: "qrc:/resorces/background.png"
    }

    Rectangle {
        id: transframe
        x: 500
        y: 200
        width: 200
        height: 100
    }

}

如何让transframe的区域透明，这样我就可以看到背景下的图形了。

【问题讨论】：

如果您可以添加您注意到的屏幕截图，这将是有益的。也许你可以为 transframe 设置 color:"transparent" 属性

标签： qt qml qtquick2

【解决方案1】：

OpacityMask 是您正在寻找的。p>

例子：

    Rectangle {
        width: 800; height: 600
        color: 'red'

        Image {
            id: background
            width: 800; height: 600
            source: "qrc:/resorces/background.png"
            visible: false
        }
        Item {
            id: transframe
            width: 800; height: 600
            visible: false
            Rectangle {
                x: 500; y: 200; width: 200; height: 100
            }
        }
        OpacityMask { // don't forget to import QtGraphicalEffects
            anchors.fill: background
            source: background
            maskSource: transframe
            invert: true
        }
    }

【讨论】：

非常感谢您的回答，我正在寻找 OpacityMask。
@Andrii 我使用的是 Qt 5.6，但是在 Qt 5.7 中引入了 invert 的属性。我认为在 Qt 5.6 中将 maskSource 作为除 transframe 之外的区域可能很有用。有没有其他办法？
@CN.Hu 我相信最简单的方法是用孔周围的四个Rectangle 替换transframe 中的孔Rectangle。或者使用您最喜欢的绘图应用绘制蒙版图像并将其加载到Image。
@Andrii 最简单的方法和我想的一样，非常感谢！~

【解决方案2】：

Item { 
    width: 800 
    height: 600
    Image {
        id: background
        width: 800
        height: 600
        source: "qrc:/resorces/background.png"
    }
    Rectangle {
        id: transframe
        x: 500
        y: 200
        width: 200
        height: 100
        color:"transparent"
    }
}

【讨论】：

transframe可以是透明的，但是transframe在背景中的区域还是不透明的。我仍然看不到背景下的图形。