一、引言

在科学计算、数据分析和工程应用中,二维曲线绘制是一项基础而重要的功能。Qt作为功能强大的跨平台C++图形界面框架,提供了多种绘制曲线的方法。本文将深入讲解Qt中二维曲线绘制的原理,并通过完整的代码示例展示三种主要实现方法。

二、Qt绘图原理

2.1 绘图设备与绘图引擎

Qt的绘图系统基于设备无关的绘图引擎。主要包含以下核心组件:

QPaintDevice(绘图设备)

• QWidget、QPixmap、QImage等都继承自QPaintDevice
• 提供了绘图的目标表面

QPainter(绘图器)

• 负责在QPaintDevice上执行实际的绘图操作
• 提供drawLine、drawEllipse、drawPath等绘图函数
• 支持反锯齿、变换、裁剪等高级特性

QPaintEngine(绘图引擎)

• 底层绘图实现,QPainter通过它与设备交互
• 针对不同平台有不同的实现(Raster、OpenGL等)

2.2 坐标系统

Qt使用逻辑坐标系统:

• 原点默认在左上角
• X轴向右为正,Y轴向下为正
• 可通过QTransform进行坐标变换(平移、旋转、缩放)

2.3 绘图流程

创建QPainter → 设置画笔/画刷 → 坐标变换(可选) → 绘制图形 → 销毁QPainter

三、三种主要绘制方法

方法一:使用QPainter直接绘制

优点: 灵活、轻量、完全可控
缺点: 需要手动处理坐标变换、交互等

方法二:使用QCustomPlot(第三方库)

优点: 功能强大、支持多种图表类型、交互丰富
缺点: 需要额外集成第三方库

方法三:使用QtCharts(Qt官方)

优点: Qt官方支持、集成简单
缺点: 需要Qt 5.7+,商业许可或GPL/LGPLv3

四、方法一:QPainter实现详解

4.1 实现步骤

步骤1: 创建继承自QWidget的自定义窗口类

class CurveWidget : public QWidget {
    Q_OBJECT
public:
    explicit CurveWidget(QWidget *parent = nullptr);
    
protected:
    void paintEvent(QPaintEvent *event) override;
    
private:
    QVector<QPointF> dataPoints;  // 存储数据点
    void generateSinWave();        // 生成正弦波数据
};

步骤2: 在构造函数中准备数据

步骤3: 重写paintEvent实现绘制逻辑

步骤4: 实现坐标转换(数学坐标→屏幕坐标)

4.2 完整源代码

curvewidget.h

#ifndef CURVEWIDGET_H
#define CURVEWIDGET_H

#include <QWidget>
#include <QVector>
#include <QPointF>

class CurveWidget : public QWidget
{
    Q_OBJECT
public:
    explicit CurveWidget(QWidget *parent = nullptr);

protected:
    void paintEvent(QPaintEvent *event) override;

private:
    QVector<QPointF> dataPoints;
    
    void generateSinWave();
    void drawAxes(QPainter &painter);
    void drawCurve(QPainter &painter);
    QPointF mapToScreen(const QPointF &point);
};

#endif // CURVEWIDGET_H

curvewidget.cpp

#include "curvewidget.h"
#include <QPainter>
#include <QPen>
#include <cmath>

CurveWidget::CurveWidget(QWidget *parent) : QWidget(parent)
{
    setMinimumSize(800, 600);
    setWindowTitle("Qt二维曲线绘制示例");
    
    // 生成正弦波数据
    generateSinWave();
}

void CurveWidget::generateSinWave()
{
    dataPoints.clear();
    
    // 生成0到4π的正弦波数据
    for (double x = 0; x <= 4 * M_PI; x += 0.1) {
        double y = sin(x);
        dataPoints.append(QPointF(x, y));
    }
}

void CurveWidget::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    
    QPainter painter(this);
    
    // 开启反锯齿
    painter.setRenderHint(QPainter::Antialiasing, true);
    
    // 绘制背景
    painter.fillRect(rect(), Qt::white);
    
    // 绘制坐标轴
    drawAxes(painter);
    
    // 绘制曲线
    drawCurve(painter);
}

void CurveWidget::drawAxes(QPainter &painter)
{
    QPen axisPen(Qt::black, 2);
    painter.setPen(axisPen);
    
    int margin = 50;
    int w = width() - 2 * margin;
    int h = height() - 2 * margin;
    
    // X轴
    painter.drawLine(margin, height() - margin, width() - margin, height() - margin);
    
    // Y轴
    painter.drawLine(margin, margin, margin, height() - margin);
    
    // 绘制刻度和标签
    painter.setFont(QFont("Arial", 8));
    
    // X轴刻度
    for (int i = 0; i <= 4; i++) {
        int x = margin + i * w / 4;
        painter.drawLine(x, height() - margin, x, height() - margin + 5);
        painter.drawText(x - 20, height() - margin + 20, 
                        QString::number(i * M_PI) + "π");
    }
    
    // Y轴刻度
    for (int i = -1; i <= 1; i++) {
        int y = height() / 2 - i * h / 4;
        painter.drawLine(margin - 5, y, margin, y);
        painter.drawText(margin - 30, y + 5, QString::number(i));
    }
    
    // 轴标签
    painter.drawText(width() / 2 - 10, height() - 10, "X");
    painter.drawText(10, height() / 2, "Y");
}

void CurveWidget::drawCurve(QPainter &painter)
{
    if (dataPoints.isEmpty())
        return;
    
    QPen curvePen(Qt::blue, 2);
    painter.setPen(curvePen);
    
    // 绘制曲线
    QPainterPath path;
    QPointF firstPoint = mapToScreen(dataPoints.first());
    path.moveTo(firstPoint);
    
    for (int i = 1; i < dataPoints.size(); i++) {
        QPointF screenPoint = mapToScreen(dataPoints[i]);
        path.lineTo(screenPoint);
    }
    
    painter.drawPath(path);
    
    // 绘制数据点
    painter.setPen(Qt::NoPen);
    painter.setBrush(QBrush(Qt::red));
    
    for (const QPointF &point : dataPoints) {
        QPointF screenPoint = mapToScreen(point);
        painter.drawEllipse(screenPoint, 3, 3);
    }
}

QPointF CurveWidget::mapToScreen(const QPointF &point)
{
    int margin = 50;
    int w = width() - 2 * margin;
    int h = height() - 2 * margin;
    
    // 数据范围: x[0, 4π], y[-1, 1]
    double xRatio = point.x() / (4 * M_PI);
    double yRatio = (point.y() + 1) / 2.0;  // 将[-1,1]映射到[0,1]
    
    double screenX = margin + xRatio * w;
    double screenY = height() - margin - yRatio * h;
    
    return QPointF(screenX, screenY);
}

main.cpp

#include <QApplication>
#include "curvewidget.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    
    CurveWidget widget;
    widget.show();
    
    return app.exec();
}

项目配置文件(.pro)

QT += core gui widgets

CONFIG += c++11

TARGET = CurveDrawing
TEMPLATE = app

SOURCES += \
    main.cpp \
    curvewidget.cpp

HEADERS += \
    curvewidget.h

五、方法二:使用QCustomPlot

5.1 集成QCustomPlot

步骤1: 从官网下载QCustomPlot: https://www.qcustomplot.com/

步骤2: 将qcustomplot.h和qcustomplot.cpp添加到项目

步骤3: 在.pro文件中添加:

QT += printsupport

5.2 示例代码

#include <QApplication>
#include <QMainWindow>
#include "qcustomplot.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    
    QMainWindow window;
    window.setWindowTitle("QCustomPlot示例");
    window.resize(800, 600);
    
    QCustomPlot *customPlot = new QCustomPlot(&window);
    window.setCentralWidget(customPlot);
    
    // 准备数据
    QVector<double> x(101), y(101);
    for (int i = 0; i < 101; i++) {
        x[i] = i / 50.0 * 4 * M_PI;
        y[i] = sin(x[i]);
    }
    
    // 添加图形
    customPlot->addGraph();
    customPlot->graph(0)->setData(x, y);
    customPlot->graph(0)->setPen(QPen(Qt::blue, 2));
    customPlot->graph(0)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssCircle, Qt::red, 5));
    
    // 设置坐标轴标签
    customPlot->xAxis->setLabel("X");
    customPlot->yAxis->setLabel("Y");
    
    // 设置坐标轴范围
    customPlot->xAxis->setRange(0, 4 * M_PI);
    customPlot->yAxis->setRange(-1.5, 1.5);
    
    // 启用交互
    customPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom);
    
    customPlot->replot();
    
    window.show();
    
    return app.exec();
}

六、方法三:使用QtCharts

6.1 配置QtCharts

在.pro文件中添加:

QT += charts

6.2 示例代码

#include <QApplication>
#include <QMainWindow>
#include <QtCharts/QChartView>
#include <QtCharts/QLineSeries>
#include <QtCharts/QValueAxis>
#include <cmath>

QT_CHARTS_USE_NAMESPACE

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    
    // 创建曲线系列
    QLineSeries *series = new QLineSeries();
    series->setName("sin(x)");
    
    // 添加数据点
    for (double x = 0; x <= 4 * M_PI; x += 0.1) {
        series->append(x, sin(x));
    }
    
    // 创建图表
    QChart *chart = new QChart();
    chart->addSeries(series);
    chart->setTitle("QtCharts曲线示例");
    chart->setAnimationOptions(QChart::SeriesAnimations);
    
    // 创建坐标轴
    QValueAxis *axisX = new QValueAxis();
    axisX->setTitleText("X");
    axisX->setRange(0, 4 * M_PI);
    
    QValueAxis *axisY = new QValueAxis();
    axisY->setTitleText("Y");
    axisY->setRange(-1.5, 1.5);
    
    chart->addAxis(axisX, Qt::AlignBottom);
    chart->addAxis(axisY, Qt::AlignLeft);
    series->attachAxis(axisX);
    series->attachAxis(axisY);
    
    // 创建视图
    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing);
    
    QMainWindow window;
    window.setCentralWidget(chartView);
    window.resize(800, 600);
    window.setWindowTitle("QtCharts示例");
    window.show();
    
    return app.exec();
}

七、三种方法对比

特性	QPainter	QCustomPlot	QtCharts
灵活性	★★★★★	★★★★	★★★
易用性	★★	★★★★★	★★★★★
性能	★★★★★	★★★★	★★★★
交互功能	需自实现	★★★★★	★★★★
图表类型	需自实现	丰富	丰富
学习曲线	陡峭	平缓	平缓

八、实用技巧

8.1 性能优化

1. 使用双缓冲: 先在QPixmap上绘制,再贴到窗口
2. 数据抽稀: 大数据量时进行降采样
3. 裁剪区域: 只绘制可见区域的内容
4. 避免频繁重绘: 使用update()而非repaint()

8.2 交互实现

// 鼠标交互示例
void mousePressEvent(QMouseEvent *event) override {
    if (event->button() == Qt::LeftButton) {
        // 屏幕坐标转数据坐标
        QPointF dataPoint = mapFromScreen(event->pos());
        // 处理点击事件
    }
}

void wheelEvent(QWheelEvent *event) override {
    // 实现缩放
    double scaleFactor = event->angleDelta().y() > 0 ? 1.1 : 0.9;
    // 更新缩放比例
    update();
}

8.3 多曲线绘制

// 存储多条曲线
QVector<QVector<QPointF>> curves;
QVector<QColor> curveColors;

// 绘制时遍历
for (int i = 0; i < curves.size(); i++) {
    painter.setPen(QPen(curveColors[i], 2));
    // 绘制第i条曲线
}

九、常见问题解决

9.1 曲线锯齿问题

painter.setRenderHint(QPainter::Antialiasing, true);

9.2 坐标轴刻度标注

• 根据数据范围动态计算刻度间隔
• 使用对数刻度处理大范围数据

9.3 大数据量卡顿

• 实现LOD(Level of Detail)机制
• 使用OpenGL加速绘制

十、总结

本文详细介绍了Qt中二维曲线绘制的三种主要方法:

1. QPainter方法适合需要完全自定义和最优性能的场景
2. QCustomPlot适合需要丰富交互功能的科研和工程应用
3. QtCharts适合快速开发和商业应用

选择合适的方法取决于具体需求:

• 简单展示 → QtCharts
• 复杂交互 → QCustomPlot
• 极致性能/特殊需求 → QPainter

掌握这些技术,您就能在Qt应用中实现专业级的数据可视化功能!

参考资料

• Qt官方文档: https://doc.qt.io/
• QCustomPlot官网: https://www.qcustomplot.com/
• QtCharts文档: https://doc.qt.io/qt-5/qtcharts-index.html

---