Drawing multiple rectangles into image in QML - qt

Question

I am trying to draw rectangles into QML. Data, which contains info about those rectangles, looks like this:
X
Y
Width
Height
Data
Data are stored in array and each item in array represents one rectangle. I am looking for best (or at least a good) way to draw those rectangles.
Which component of QML should I use?
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"
}
}

Answer 1

It is not necessary to create a QObject, just a QVariantList that stores the QRect is enough. On the other hand the model that you have to pass is just the list of QRect, to access each QRect in the delegate you must use modelData.
main.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<< QRect{50, 30, 100, 100}
<< QRect{200, 20, 30, 30}
<<QRect{300, 300, 200, 33}
<<QRect{400, 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();
}
main.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"
}
}
}
Update:
main.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{ QRect{50, 30, 100, 100}, "text1", Qt::red});
rectlist <<QVariant::fromValue( Data{ QRect{200, 20, 30, 30 }, "text2", QColor("blue")});
rectlist <<QVariant::fromValue( Data{ QRect{300, 300, 200,33}, "text3", QColor(0, 200, 0)});
rectlist <<QVariant::fromValue( Data{ QRect{400, 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"
main.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
}
}
}
}