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

Question

有这样一个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的区域透明，这样才能看到背景下的图形

Answer 1

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

Answer 2

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

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

How to make a particular area of qml view transparent

qt

qml

qtquick2