C++ 如何重新绘制自定义QQuickItem

通过扩展

QQuickItem

并重写

updatePaintNode（）

函数，我创建了一个自定义QML元素。我在我的应用程序上画了两条线，这两条线的大小将根据添加到应用程序左侧的块大小进行扩展或缩小。此块可以在小模式和大模式下添加，也可以通过选择顶部栏上的按钮删除

这是我的代码：

line.cpp

#include <QSGGeometry>
#include <QSGGeometryNode>
#include <qsgnode.h>
#include <qsgflatcolormaterial.h>
#include "line.h"

Lines::Lines(QQuickItem *parent) : QQuickItem(parent) {
    setFlag(QQuickItem::ItemHasContents, true);
}

Lines::~Lines() {}

QSGNode *Lines::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) {
    QSGGeometryNode *node = NULL;
    QSGGeometry *geometry = NULL;
    QSGGeometry::Point2D *vertices;
    QSGFlatColorMaterial *material;
    int points = 0;
    int lineHeight = 0;
    int ys = 0;
    int xs;
    int xe;

    points = width();

    if (!oldNode)
    {
        node = new QSGGeometryNode;
        geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), points);
        geometry->setLineWidth(1);
        geometry->setDrawingMode(GL_LINES);
        node->setGeometry(geometry);
        node->setFlag(QSGNode::OwnsGeometry);
        material = new QSGFlatColorMaterial;
        material->setColor("white");
        node->setMaterial(material);
        node->setFlag(QSGNode::OwnsMaterial);
    }
    else
    {
        node = static_cast<QSGGeometryNode *>(oldNode);
        geometry = node->geometry();
        geometry->allocate(points);
    }

    vertices = geometry->vertexDataAsPoint2D();
    lineHeight = (height() / 4);

    xs = 0;
    xe = width() - xs;

    for(int i = 0; i < 2; i++)
    {
        ys = ( i * lineHeight);
        vertices[(2*i)].set(xs, ys);
        vertices[(2*i)+1].set(xs + xe, ys);
    }

    node->markDirty(QSGNode::DirtyForceUpdate);
    return node;
}

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "line.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    qmlRegisterType<Lines>("lines", 1, 0, "Lines");

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

我发现，当我选择左侧灰色块（使用按钮）时，线条没有正确地重新绘制，我看到一些小故障。下面所附的图片显示了我的输出有问题

我尝试调用

node->markDirty（QSGNode:：DirtyForceUpdate）

，但没有用

如何解决此问题。请帮忙。提前谢谢

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "line.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    qmlRegisterType<Lines>("lines", 1, 0, "Lines");

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.0
import lines 1.0

Window {
    id: canvas

    height: 500
    width: 500
    color: "black"
    visible: true

    Rectangle {
        id: topBar

        height: 40
        Row {
            spacing: 10
            Button {
                text: "Small"
                onClicked: {
                    rect.visible = true
                    rect.width = 50
                }
            }
            Button {
                text: "Big"
                onClicked: {
                    rect.visible = true
                    rect.width = 100
                }
            }
            Button {
                text: "None"
                onClicked: {
                    rect.visible = false
                    rect.width = 0
                }
            }
        }
    }

    Rectangle {
        id: rect

        anchors {
            left: parent.left
            top: topBar.bottom
            bottom: parent.bottom
        }

        color: "grey"
        visible: false
    }

    Rectangle {
        id: rect2

        anchors {
            left: rect.right
            right: parent.right
            top: topBar.bottom
            bottom: parent.bottom
        }

        color: "black"

        Lines {
            id: lines

            x: 0
            y: 100

            width: parent.width
            height: 225
        }
    }
}