如何在 QML 中使用透明矩形隐藏图像？

Question

在下面的代码中，我想使用透明矩形隐藏图像。请给我一些解决方案。我使用了 z 值，但它不起作用。图像仍然可见。

main.qml

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    Image
    {
        id:underlyingImage
        width: 400
        height: 400
        x:0;
        y:0;
        source:"qrc:/Jellyfish.jpg"
        z:1
    }
    Rectangle
    {
        id:hiding_rect
        width: 400
        height: 400
        x:0;
        y:0;
        color:"transparent"
        z:100
    }
}

Answer 1

您可以使用 OpacityMask 来实现您的尝试，在下面的示例中我们隐藏了图像的一个象限。

import QtQuick 2.5
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    Image
    {
        id:underlyingImage
        width: 400
        height: 400

        fillMode: Image.PreserveAspectCrop
        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: hiding_rect
        }

        source:"qrc:/Jellyfish.jpg"
    }
    Rectangle
    {
        id:hiding_rect
        width: underlyingImage.width/2
        height: underlyingImage.height/2
    }
}

Answer 2

还有另一种使用方法OpacityMask，但是你的Qt版本应该>=5.7。

import QtQuick 2.0
import QtQuick.Window 2.0
import QtGraphicalEffects 1.0

Window {
    width: 1280
    height: 800
    visible: true

    Rectangle {
        id: background
        anchors.fill: parent
        color: "black"
    }

    Image {
        id: underlyingImage
        width: 1204
        height: 682
        visible: false
        source: "qrc:/timg.jpg"
    }

    Item {
        id: hidingRect
        anchors.fill: underlyingImage
        visible: false

        Rectangle {
            width: underlyingImage.width / 2
            height: underlyingImage.height / 2
            color: "yellow"
        }
    }

    OpacityMask {
        anchors.fill: underlyingImage
        source: underlyingImage
        maskSource: hidingRect
        invert: true
    }
}

The result

如何在 QML 中使用透明矩形隐藏图像？

How to hide an image using transparent rectangle in QML?

qt

qml

qt-quick