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

Posted 2021-04-11

有这样的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的区域透明，然后我可以在背景下看到图形。

答案

OpacityMask正是您所寻找的。

例：

    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
        }
    }

另一答案

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"
    }
}