Как использовать QSGClipNode с пользовательской геометрией?

Question

Как использовать QSGClipNode с пользовательской геометрией?
Это образец:

Answer 1

QSGClipNode

QSGClipNode использует свою геометрию, чтобы обрезать рендеринг своих дочерних узлов.

Поэтому, чтобы использовать его, вы должны сначала создать геометрию (набор вершин / треугольников), представляющую вашу маску, и установить ее с помощью setGeometry метод. Ресурсы ограничены да, вот несколько примеров использования QSGGeometry, что вам нужно нарисовать свою "сердечко" форму:

• пример создания пользовательской геометрии с использованием QSG: QQuickPolygon
• старая презентация, которую я сделал (немного удивлен, что она появляется в первых результатах Google)
• и пример из документации Qt

Затем используйте appendChildNode метод, чтобы добавить потомков, которые вы хотите обрезать в вашем QSGClipNode. В твоем случае, QSGImageNode это, вероятно, путь, чтобы показать ваше изображение обрезано.

Другое решение: OpacityMask

Другое решение, доступное без углубления в классы графа сцены C++, заключается в использовании OpacityMask от QtQuick.GraphicalEffect, Это также относится к QtQuickItem, который вы бы создали в C++.

Пример в документации Qt прост в использовании, просто не забудьте установить visible свойство Маски и Источника false, OpacityMask Сам элемент будет отображать источник обрезки / маскировки.

Вот способ обрезать "детей" с помощью него (NB: в то время не тестировался):

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