QML 图层元素在重叠时“显示”其上方的元素

Question

是否有可能在 QML 中使用图层着色器效果来创建一个项目，使另一个项目（具有更高的 z 索引）仅在两个图层重叠时才可见？我一直在搞乱 OpacityMask 和 ThresholdMask 但一直无法弄清楚。我在下面示例的上下文中寻找的效果是，如果黑色圆圈仅在两个红色方块下方时可见：

当前：

想要的：

一些关键点是底层（红色方块）必须是可移动的（OpacityMask 似乎不允许您拖动 maskSource），并且底层还需要能够在其中包含黑色圆圈之外的其他元素回应。任何关于正确学习的指导以实现这一目标将不胜感激。这是红色方块和黑色圆圈的 QML。红色方块可作为一个元素拖动：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12

Window {
    id: main_window
    visible: true
    width: 1500
    height: 1000
    title: qsTr("Hello World")

    Item {
        width: main_window.width
        height: main_window.height
        LinearGradient {
            anchors.fill: parent
            start: Qt.point(0, 0)
            end: Qt.point(main_window.width, 0)
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#003cff" }
                GradientStop { position: 1.0; color: "#9afff9" }
            }
        }
    }

    Rectangle {
        id: sfg
        width: 175
        height: 75
        color: 'transparent'
        RowLayout {
            width: parent.width
            height: parent.height
            spacing: 25

            Rectangle {
                Layout.preferredWidth: 75
                Layout.fillWidth: false
                Layout.fillHeight: true
                color: 'red'
            }

            Rectangle {
                Layout.preferredWidth: 75
                Layout.fillWidth: false
                Layout.fillHeight: true
                color: 'red'
            }

        }
        MouseArea {
            cursorShape: Qt.PointingHandCursor
            anchors.fill: parent
            drag {
                target: sfg
            }
        }
    }

    Rectangle {
        id: mask
        color: 'black'
        x: 400
        y: 200
        width: 100
        height: 100
        visible: true
        opacity: 1
        radius: 50
    }
}

Answer 1

像这样？

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12

Window {
    id: main_window
    visible: true
    width: 1500
    height: 1000
    title: qsTr("Hello World")

    Item {
        width: main_window.width
        height: main_window.height
        LinearGradient {
            anchors.fill: parent
            start: Qt.point(0, 0)
            end: Qt.point(main_window.width, 0)
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#003cff" }
                GradientStop { position: 1.0; color: "#9afff9" }
            }
        }
    }

    Rectangle {
        id: sgfBox
        anchors.fill: parent
        color: "transparent"

        Rectangle {
            id: sfg
            width: 175
            height: 75
            color: 'transparent'
            RowLayout {
                width: parent.width
                height: parent.height
                spacing: 25

                Rectangle {
                    Layout.preferredWidth: 75
                    Layout.fillWidth: false
                    Layout.fillHeight: true
                    color: 'red'
                }

                Rectangle {
                    Layout.preferredWidth: 75
                    Layout.fillWidth: false
                    Layout.fillHeight: true
                    color: 'red'
                }

            }
            MouseArea {
                cursorShape: Qt.PointingHandCursor
                anchors.fill: parent
                drag {
                    target: sfg
                }
            }
        }
    }

    Rectangle {
        id: mask
        anchors.fill: parent
        color: "transparent"

        Rectangle {
            color: 'black'
            x: 400
            y: 200
            width: 100
            height: 100
            opacity: 1
            radius: 50
        }

        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: sgfBox
        }
    }
}