Чтобы преобразовать один интерфейс GUI, написанный на C ++ с библиотеками Qt, в QML, я должен найти альтернативу QPainterPath в QML. Действительно, на данный момент куча фигур рисуется в интерфейсе GUI, а код C ++ изменяет цвет этих объектов, когда происходят определенные события. Объекты QPainterPath используются для хранения этих фигур.
Буду признателен, если вы покажете мне, как рисовать два прямоугольных объекта на холсте QML, а затем как изменить их заполненный цвет в коде C ++.
Как я сказал в своем комментарии, одним из вариантов может быть Canvas, он имеет методы, аналогичные QPainterPath. В следующей части я покажу пример, в котором цвет можно изменить с C ++ с помощью метода, который генерирует случайные цвета и вызывается QTimer:
main.cpp
#include <QColor>
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QTime>
#include <QTimer>
class ColorProvider: public QObject{
Q_OBJECT
Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
public:
QColor color() const{
return mColor;
}
void setColor(const QColor &color){
if(color == mColor)
return;
mColor = color;
emit colorChanged(mColor);
}
Q_INVOKABLE void randomColor(){
qsrand((uint)QTime::currentTime().msec());
setColor(QColor(qrand() % 256, qrand() % 256, qrand() % 256));
}
signals:
void colorChanged(const QColor &color);
private:
QColor mColor;
};
#include "main.moc"
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
ColorProvider obj;
QTimer timer;
QObject::connect(&timer, &QTimer::timeout, &obj, &ColorProvider::randomColor);
timer.start(100);
QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("colorProvider", &obj);
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Canvas {
id:canvas
anchors.fill: parent
onPaint:{
var ctx = canvas.getContext('2d');
ctx.lineWidth = 4
ctx.fillStyle = "orange"ctx.strokeStyle = "red"ctx.fillRect(50, 40, 100, 100)
ctx.stroke()
ctx.fill()
ctx.lineWidth = 10
ctx.fillStyle = colorProvider.color
ctx.fillRect(150, 150, 300, 300)
ctx.stroke()
ctx.fill()
ctx.roundedRect(20, 20, 40, 40, 10, 10)
}
}
Connections {
target: colorProvider
onColorChanged: canvas.requestPaint()
}
}
Полный пример можно найти в следующем ссылка на сайт.
У меня возникли проблемы с реализацией этого примера. Вот мое определение класса:
class ColorZones : public QObject
{
Q_OBJECT
Q_PROPERTY(QList<QVariant> ColorZones READ getZoneColor NOTIFY zoneColorChanged)
public:
explicit ColorZones(QObject *parent = nullptr);
QList<QVariant> getZoneColor() const {return _zonesColor;}
void setZoneColor(const int zone, const QColor color);
signals:
void zoneColorChanged();//QList<QVariant>);
private:
QList<QVariant> _zonesColor;
};
А вот реализация конструктора и функции setZoneColor:
ColorZones::ColorZones(QObject *parent) : _zonesColor{QColor("orange"),QColor("grey"),QColor("grey"),QColor("grey"),QColor("grey"),QColor("grey")}
{
}
void ColorZones::setZoneColor(const int zone,const QColor color)
{
ROS_INFO("The color was set");
_zonesColor[zone] = color;
emit zoneColorChanged();//_zonesColor);
}
Затем в конструкторе основного приложения у меня есть такие строки кода:
ColorZones *color_zones = new ColorZones;
this->rootContext()->setContextProperty("ColorZones", color_zones);
this->load(QUrl(QStringLiteral("qrc:/window1.qml")));
А вот и файл .qml:
import QtQuick 2.0
import QtQuick.Controls 1.4Rectangle{
id: zones
width : 600; height : 600
color : "transparent"border.color: "black"border.width: 2
radius: 10
objectName : "h_zones"visible : true
Canvas {
id:canvas
anchors.fill: parent
onPaint:{
var ctx = canvas.getContext('2d');
ctx.lineWidth = 2
ctx.strokeStyle = "black"//ZONE 0
ctx.fillStyle = ColorZones.getZoneColor[1]
ctx.beginPath()
ctx.moveTo(310,301)
ctx.arcTo(10,1,600,600,65,50)
ctx.closePath()
ctx.stroke()
ctx.fill()
ctx.moveTo(310,181)
ctx.lineTo(310,301)ctx.fill()
ctx.stroke()
//ZONE 1
ctx.fillStyle = ColorZones.getZoneColor[1]
ctx.beginPath()
ctx.moveTo(304,304)
ctx.lineTo(297,272)
ctx.lineTo(189,164)
ctx.lineTo(164,189)
ctx.lineTo(272,297)
ctx.closePath()
ctx.fill()
ctx.stroke
//ZONE 2
ctx.fillStyle = "orange"
ctx.beginPath()
ctx.moveTo(181,310)
ctx.lineTo(301,310)
ctx.closePath()
ctx.beginPath()
ctx.moveTo(301,310)
ctx.lineTo(274,292)
ctx.lineTo(121,292)
ctx.lineTo(121,328)
ctx.lineTo(274,328)
ctx.closePath();
ctx.fill()
ctx.stroke
//ZONE 3
ctx.fillStyle = "blue"
ctx.beginPath()
ctx.moveTo(310,319)
ctx.lineTo(328,346)
ctx.lineTo(328,499)
ctx.lineTo(292,499)
ctx.lineTo(292,346)
ctx.closePath()
ctx.fill()
ctx.stroke
//ZONE 4
ctx.fillStyle = "blue"ctx.beginPath()
ctx.moveTo(439,310)
ctx.lineTo(319,310)
ctx.closePath()
ctx.beginPath()
ctx.moveTo(319,310)
ctx.lineTo(346,292)
ctx.lineTo(499,292)
ctx.lineTo(499,328)
ctx.lineTo(346,328)
ctx.closePath()
ctx.fill()
ctx.stroke
//ZONE 5
ctx.fillStyle = "green"
ctx.beginPath()
ctx.moveTo(316,304)
ctx.lineTo(323,272)
ctx.lineTo(431,164)
ctx.lineTo(456,189)
ctx.lineTo(348,297)
ctx.closePath()
ctx.fill()
ctx.stroke
}
}
Connections {
target: ColorZones //property
onZoneColorChanged: canvas.requestPaint()
}
Однако две вещи не работают:
Я не могу понять, что происходит?