在 QML 中将多个矩形绘制到图像中

Posted 2023-02-14

【中文标题】在 QML 中将多个矩形绘制到图像中

【英文标题】：Drawing multiple rectangles into image in QML

【发布时间】：2018-07-12 08:14:21

【问题描述】：

我正在尝试将矩形绘制到 QML 中。包含有关这些矩形的信息的数据如下所示：

X 是 宽度 身高 数据

数据存储在数组中，数组中的每一项代表一个矩形。我正在寻找绘制这些矩形的最佳（或至少是一种好的）方法。

我应该使用 QML 的哪个组件？

class.h

class MyClass : public QObject

    Q_OBJECT
    Q_PROPERTY(QList<structure> list READ list NOTIFY listChanged)
    public:
        QList<structure> list() const  return list_; 
    signals:
        listChanged();
    private:
        QList<structure> list_;

repeater.qml

Repeater 
    model: 2 
    delegate: Rectangle
        width: model.list.width
        height: model.list.height
        x: model.list.x
        y:  model.list.y
        color: "red"
    

【问题讨论】：

数据包含另一个数据？

你试过Repeater吗？你有没有尝试过？

以后可以修改X、Y、Width或Height属性吗？，如果可以，更好的选择是带有Repeater的模型

那么请说明您是如何尝试中继器的。我想一旦您提供了一个最小、完整且可验证的示例，我们的大多数问题都会得到解答。也许有人会帮助你。

@Jiu 我认为我们必须让他暂时尝试一些事情，当我们遇到真正的问题时，我们可以帮助他。 :)

【参考方案1】：

不必创建QObject，只需一个存储QRect 的QVariantList 就足够了。另一方面，您必须传递的模型只是QRect 的列表，要访问委托中的每个QRect，您必须使用modelData。

ma​​in.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

#include <QRect>

int main(int argc, char *argv[])

    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QVariantList rectlist;
    rectlist<< QRect50, 30, 100, 100
            << QRect200, 20, 30, 30
            <<QRect300, 300, 200, 33
           <<QRect400, 23, 44, 55;

    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("rectlist", rectlist);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();

ma​​in.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window 
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Repeater 
        model: rectlist
        delegate: Rectangle
            x: modelData.x
            y: modelData.y
            width: modelData.width
            height: modelData.height
            color: "red"
        
        

---

更新：

ma​​in.cpp

#include <QColor>
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

#include <QRect>

struct Data

    Q_GADGET
    Q_PROPERTY(QRect rect MEMBER rect)
    Q_PROPERTY(QString text MEMBER text)
    Q_PROPERTY(QColor color MEMBER color)
public:
    QRect rect;
    QString text;
    QColor color;
    Data(const QRect& rect= QRect(), const QString& text="", const QColor& color = QColor(Qt::transparent))
        this->rect = rect;
        this->text = text;
        this->color = color;
    
;
Q_DECLARE_METATYPE(Data)

int main(int argc, char *argv[])

    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);
    QVariantList rectlist;
    rectlist <<QVariant::fromValue( Data QRect50, 30, 100, 100, "text1", Qt::red);
    rectlist <<QVariant::fromValue( Data QRect200, 20, 30, 30 , "text2", QColor("blue"));
    rectlist <<QVariant::fromValue( Data QRect300, 300, 200,33, "text3", QColor(0, 200, 0));
    rectlist <<QVariant::fromValue( Data QRect400, 23, 44, 55 , "text4");

    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("rectlist", rectlist);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();


#include "main.moc"

ma​​in.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window 
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Repeater 
        model: rectlist
        delegate: Rectangle
            x: modelData.rect.x
            y: modelData.rect.y
            width: modelData.rect.width
            height: modelData.rect.height
            color: modelData.color
            Text
                anchors.centerIn: parent
                text: modelData.text
            
        
    

【讨论】：

这里需要注意的重要一点是，Repeater 的模型是什么以及如何访问模型数据跨度>

谢谢，成功了，只是最后一个问题，如果我想向结构中添加更多数据（如QString），我需要制作模型，对吗？

@Brykyz 不，没有必要，现在更新适当的方法，模型是当您要处理诸如重新排序，添加，删除，修改等任务时，但在您的情况下不需要，因为数据是静态的。

@eyllanesc 非常感谢！