qt qml-如何在QML中使用QCustomPlot之曲线/折线示例

在QML中使用QCustomPlot绘制曲线，需要将QCustomPlot作为自定义的QQuickItem，然后将其嵌入到QML中。QCustomPlot是一个功能强大的C++绘图库，用于绘制2D图表，但默认情况下不直接支持QML。以下是如何将QCustomPlot与QML结合使用的详细示例。

步骤1：安装QCustomPlot

首先，下载并安装QCustomPlot。你可以从QCustomPlot官方网站下载最新版本。将下载的QCustomPlot文件夹放入你的项目中，并确保在.pro文件中正确包含。

步骤2：创建QCustomPlot包装类

创建一个QQuickItem派生类，用于包装QCustomPlot。

customplotitem.h

#ifndef CUSTOMPLOTITEM_H
#define CUSTOMPLOTITEM_H

#include <QQuickPaintedItem>
#include <QCustomPlot>

class CustomPlotItem : public QQuickPaintedItem
{
    Q_OBJECT

public:
    CustomPlotItem(QQuickItem *parent = nullptr);
    ~CustomPlotItem();

    void paint(QPainter *painter) override;

    Q_INVOKABLE void addGraph();
    Q_INVOKABLE void setData(const QVector<double> &x, const QVector<double> &y);

private:
    QCustomPlot *m_customPlot;
};

#endif // CUSTOMPLOTITEM_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

customplotitem.cpp

#include "customplotitem.h"

CustomPlotItem::CustomPlotItem(QQuickItem *parent)
    : QQuickPaintedItem(parent),
      m_customPlot(new QCustomPlot())
{
    setFlag(ItemHasContents, true);
}

CustomPlotItem::~CustomPlotItem()
{
    delete m_customPlot;
}

void CustomPlotItem::paint(QPainter *painter)
{
    m_customPlot->replot();
    m_customPlot->toPainter(painter);
}

void CustomPlotItem::addGraph()
{
    m_customPlot->addGraph();
}

void CustomPlotItem::setData(const QVector<double> &x, const QVector<double> &y)
{
    if (m_customPlot->graphCount() > 0)
    {
        m_customPlot->graph(0)->setData(x, y);
        update();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

步骤3：注册自定义QML组件

在main.cpp中注册自定义的QML组件。

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QtQml>
#include "customplotitem.h"

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

    qmlRegisterType<CustomPlotItem>("CustomPlot", 1, 0, "CustomPlotItem");

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

    return app.exec();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

步骤4：创建QML界面

创建一个简单的QML界面，并使用CustomPlotItem组件。

main.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import CustomPlot 1.0

ApplicationWindow {
    visible: true
    width: 800
    height: 600
    title: qsTr("QCustomPlot in QML")

    CustomPlotItem {
        id: customPlot
        width: parent.width
        height: parent.height - 100
    }

    Button {
        text: "Add Graph and Set Data"
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: {
            customPlot.addGraph()
            var x = []
            var y = []
            for (var i = 0; i < 100; i++) {
                x.push(i)
                y.push(Math.sin(i / 10))
            }
            customPlot.setData(x, y)
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

代码详解

customplotitem.h/cpp

• CustomPlotItem类: 继承自QQuickPaintedItem，包含一个QCustomPlot成员。
• paint方法: 使用QPainter在QML的绘制过程中绘制QCustomPlot内容。
• addGraph方法: 向QCustomPlot添加图形。
• setData方法: 设置图形数据，并调用update()刷新显示。

main.cpp

• qmlRegisterType: 将CustomPlotItem注册为QML类型，以便在QML中使用。

main.qml

• ApplicationWindow: 主窗口容器，用于承载整个应用程序界面。
• CustomPlotItem: 自定义QML组件，用于显示QCustomPlot。
• Button: 按钮组件，点击时向CustomPlotItem添加图形并设置数据。

总结

通过以上步骤，你可以在QML中使用QCustomPlot绘制曲线。这种方法将QCustomPlot包装在QQuickPaintedItem中，然后通过在QML中注册和使用这个自定义组件，实现了QML与QCustomPlot的结合。这种方法适用于需要在QML应用中显示复杂图表的场景。