代码之家  ›  专栏  ›  技术社区  ›  CN.Hu

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

  •  1
  • CN.Hu  · 技术社区  · 7 年前

    有这样一个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
        }
    
    }
    

    如何使跨帧区域透明,这样我就可以在背景下看到图形。

    2 回复  |  直到 7 年前
        1
  •  1
  •   Andrii    7 年前

    这个 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
            }
        }
    
        2
  •  0
  •   Malcolm Sequeira    7 年前
    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"
        }
    }