Szenengraph – Gemaltes Element

Das Beispiel „Painted Item“ veranschaulicht, wie man das QML-Scene-Graph-Framework nutzt, um benutzerdefinierte Scene-Graph-Elemente mithilfe von „ QPainter “ zu implementieren.

Die Klasse „ QQuickPaintedItem “ ist eine von „ QQuickItem “ abgeleitete Klasse zur Implementierung benutzerdefinierter QML-Scene-Graph-Elemente unter Verwendung der Schnittstellen „ QPainter “.

Das Beispiel besteht aus einer Elementklasse und einer QML-Datei zur Verwendung des Elements. Die Klasse „ TextBalloon “ repräsentiert die einzelnen Sprechblasen und erweitert „ QQuickPaintedItem “, während die Datei „ textballoons.qml “ dazu dient, das Modul mit dem QML-Typ „TextBalloon“ zu laden und die Sprechblasen anzuzeigen.

Wir werden uns zunächst auf die Klasse „ TextBalloon “ konzentrieren und anschließend mit der Datei „ textballoons.qml “ fortfahren. Ein Beispiel für die Implementierung eines Plugins für ein QML-Modul finden Sie unter „Writing an Extension Plugin“

Deklaration der Klasse „TextBalloon“

Die Klasse „ TextBalloon “ erbt von „ QQuickPaintedItem “. „ QQuickPaintedItem “ ist die Basisklasse für alle auf „ QPainter “ basierenden Elemente im QML-Scene-Graph-Framework.

class TextBalloon : public QQuickPaintedItem
{
    Q_OBJECT
    Q_PROPERTY(bool rightAligned READ isRightAligned WRITE setRightAligned NOTIFY rightAlignedChanged)
    QML_ELEMENT

    public:
        TextBalloon(QQuickItem *parent = nullptr);
        void paint(QPainter *painter) override;

        bool isRightAligned() const;
        void setRightAligned(bool rightAligned);

    private:
        bool rightAligned;

    signals:
        void rightAlignedChanged();
};

Um ein „ QQuickPaintedItem “ zu implementieren, müssen Sie die rein virtuelle Funktion „ paint()“ von „QQuickPaintedItem“ implementieren, die das Zeichnen des Typs übernimmt.

Klassendefinition von „TextBalloon“

Wir müssen darauf achten, die Eigenschaft „rightAligned“ für ein „TextBalloon“-Element zu initialisieren.

TextBalloon::TextBalloon(QQuickItem *parent)
    : QQuickPaintedItem(parent)
    , rightAligned(false)
{
}

Anschließend implementieren wir die Funktion ` paint() `, die vom Scene-Graph-Framework automatisch aufgerufen wird, um den Inhalt des Elements zu zeichnen. Die Funktion zeichnet das Element in lokalen Koordinaten.

void TextBalloon::paint(QPainter *painter)
{
    QBrush brush(QColor("#007430"));

    painter->setBrush(brush);
    painter->setPen(Qt::NoPen);
    painter->setRenderHint(QPainter::Antialiasing);

    QSizeF itemSize = size();
    painter->drawRoundedRect(0, 0, itemSize.width(), itemSize.height() - 10, 10, 10);

    if (rightAligned)
    {
        const QPointF points[3] = {
            QPointF(itemSize.width() - 10.0, itemSize.height() - 10.0),
            QPointF(itemSize.width() - 20.0, itemSize.height()),
            QPointF(itemSize.width() - 30.0, itemSize.height() - 10.0),
        };
        painter->drawConvexPolygon(points, 3);
    }
    else
    {
        const QPointF points[3] = {
            QPointF(10.0, itemSize.height() - 10.0),
            QPointF(20.0, itemSize.height()),
            QPointF(30.0, itemSize.height() - 10.0),
        };
        painter->drawConvexPolygon(points, 3);
    }
}

Zunächst legen wir den Stift und den Pinsel für das Element fest, um dessen Aussehen zu definieren. Danach beginnen wir mit dem Zeichnen. Beachten Sie, dass die Funktion ` contentsBoundingRect()` je nach Größe des Elements zum Zeichnen aufgerufen wird. Das von der Funktion ` contentsBoundingRect()` zurückgegebene Rechteck entspricht der Größe des Elements, wie sie in der QML-Datei definiert ist.

Datei „textballoons.qml“

Die Benutzeroberfläche besteht aus zwei Hauptteilen: dem scrollbaren Bereich mit den Sprechblasen und der Schaltfläche zum Hinzufügen neuer Sprechblasen.

BalloonView

ListModel {
    id: balloonModel
    ListElement {
        balloonWidth: 200
    }
    ListElement {
        balloonWidth: 120
    }
}

ListView {
    id: balloonView
    anchors.bottom: controls.top
    anchors.bottomMargin: 2
    anchors.top: parent.top
    delegate: TextBalloon {
        anchors.right: index % 2 !== 0 ? parent?.right : undefined
        height: 60
        rightAligned: index % 2 !== 0
        width: balloonWidth
    }
    model: balloonModel
    spacing: 5
    width: parent.width
}

Das `balloonModel` enthält beim Start der Anwendung zwei Typen, die von der `balloonView` angezeigt werden. Die `balloonView` wechselt die Delegate-Elemente vom Typ `TextBalloon` abwechselnd zwischen linksbündiger und rechtsbündiger Ausrichtung.

Steuerelemente

Rectangle {
    id: controls

    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.margins: 1
    anchors.right: parent.right
    border.width: 2
    color: "white"
    height: parent.height * 0.15

    Text {
        anchors.centerIn: parent
        text: qsTr("Add another balloon")
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            balloonModel.append({"balloonWidth": Math.floor(Math.random() * 200 + 100)})
            balloonView.positionViewAtIndex(balloonView.count -1, ListView.End)
        }
        onEntered: {
            parent.color = "#8ac953"
        }
        onExited: {
            parent.color = "white"
        }
    }
}

Der Steuerelemente-Teil der Benutzeroberfläche enthält ein Rechteck mit einem „ MouseArea “, dessen Farbe sich ändert, wenn der Mauszeiger darüber fährt. Dieses Steuerelement („Button“) fügt am Ende des Modells ein neues Objekt mit zufälliger Breite hinzu.

Beispielprojekt @ code.qt.io