如何将 QSGClipNode 与自定义几何图形一起使用？

Question

如何将 QSGClipNode 与自定义几何图形一起使用？
这是一个示例：

Answer 1

QSGClipNode

QSGClipNode 使用其几何来剪辑其子节点的渲染。

因此，要使用它，您首先必须创建代表蒙版的几何体（一组顶点/三角形），并使用setGeometry 方法进行设置。资源稀缺是的，这里有几个使用QSGGeometry 的例子，你需要画出你的“心”形：

• 使用 QSG 创建自定义几何的示例：QQuickPolygon
• old presentation I made（有点惊讶它出现在谷歌的第一个结果中）
• 和一个例子from Qt documentation

然后使用appendChildNode 方法在QSGClipNode 中添加您要剪辑的子节点。在您的情况下，QSGImageNode 可能是显示您的图像已剪辑的方式。

其他解决方案：OpacityMask

另一种无需深入研究 C++ 场景图类即可使用的解决方案是使用来自QtQuick.GraphicalEffect 的OpacityMask。它也适用于您在 C++ 中创建的 QtQuickItem。

example in Qt documentation 易于使用，只是不要忘记将 Mask 和 Source 的 visible 属性设置为 false，OpacityMask 元素本身将显示裁剪/屏蔽的源。

这是一种用它来剪辑“孩子”的方法（注意：当时未经测试）：

clipperitem.qml

import QtQuick 2.5
import QtGraphicalEffects 1.0

Item {
    width: 300
    height: 300

    // Item-based children will be mapped to this property
    default property alias clippedContent: clippedItem.children

    // Optional mask property to set it from outside
    property alias mask: opacityMask.mask

    Item {
        id: clippedItem
        anchors.fill: parent
        visible: false
    }

    Item {
        id: defaultMask
        // Your default mask
        visible: false
    }

    OpacityMask {
        id: opacityMask
        anchors.fill: clippedItem
        source: clippedItem
        mask: defaultMask
    }
}

ma​​in.qml

ClipperItem {
    // Content here will be clipped. Non item-based elements will have
    // to be explicitly assigned to `ressources` property (i.e. Timer, etc.)
    Rectangle {
        //...
    }
    Image {
        //...
    }
}