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

Question

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

Answer 1

QSGC剪辑节点

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

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

• 使用 QSG 创建自定义几何图形的示例：QQuickPolygon
• 我做了一个旧的演示文稿（有点惊讶它出现在谷歌的第一个结果中）
• 以及来自 Qt 文档的示例

然后使用该appendChildNode方法在 QSGClipNode 中添加要剪辑的子节点。在你的情况下，QSGImageNode可能是要走的路，显示你的图像被剪掉了。

其他解决方案：OpacityMask

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

Qt 文档中的示例很容易使用，只是不要忘记将visibleMask 和 Source 的属性都设置为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
    }
}

main.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 {
        //...
    }
}