QT上位机开发（图形绘制）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

? ? ? ? 图形绘制是上位机软件开发很重要的一个功能。这个图形绘制，有的是离线的，有的是实时绘制的。就我个人而言，离线绘制的情况可能更多一些，因为可以反复看、反复研究。相信做过控制的同学肯定都学过PID，用上位机调整PID参数就是很好的一种方式。今天呢，我们正好借助于qt的painter机制，来绘制一个简单的正弦图和余弦图，以备将来之用。

1、创建qt示例工程

? ? ? ? 因为今天实现的是图形绘制，所以基本上只需要一个空窗口就可以。不需要用designer在上面绘制任何的控件。

2、QtWidgetsApplication.h头文件

? ? ? ? 图形绘制中不涉及到任何的变量，目前只涉及到一个函数，那就是paintEvent这个函数。所以，在头文件中也只需要添加这么一个函数即可。

#pragma once

#include <QtWidgets/QMainWindow>
#include "ui_QtWidgetsApplication.h"

class QtWidgetsApplication : public QMainWindow
{
	Q_OBJECT

public:
	QtWidgetsApplication(QWidget *parent = nullptr);
	~QtWidgetsApplication();

private:
	Ui::QtWidgetsApplicationClass ui;

protected:
	void paintEvent(QPaintEvent *event);

};

3、QtWidgetsApplication.cpp文件

? ? ? ? 对于窗口，或者是widget的重绘，在qt上面都是通过paintEvent函数进行的。首先呢，一般先创建一个QPainter变量，入参就是当前的窗口。接着，绘制两条直线，分别是x轴和y轴。有了这两条轴之后，就可以接着绘制正弦和余弦了。

? ? ? ? 因为正弦和余弦是非常类似的，所以这里仅分析一下正弦的画法。绘制正弦之前，需要确定一下采样的点数，也就是绘制的精度是多少。当然，因为整个窗口是需要画满的，这个时候总的宽度和点数相除，就产生了步进的长度。

? ? ? ? 有了步进长度和总点数之后，就开始计算每个点的位置。此时又因为绘制y轴的时候，窗口的坐标是至上而下的，这和实际的坐标有点差别，所以需要用height/2 - v_sin*height/2处理下。每次绘制的时候，都是绘制的一条短直线，很多短的直线连在一起，构成了我们需要的正弦弧线。这就是整个绘制的过程。

#include <QtWidgets>
#include "QtWidgetsApplication.h"

QtWidgetsApplication::QtWidgetsApplication(QWidget *parent)
	: QMainWindow(parent)
{
	ui.setupUi(this);
}

// destructor function
QtWidgetsApplication::~QtWidgetsApplication()
{
}

void QtWidgetsApplication::paintEvent(QPaintEvent *event)  {
	Q_UNUSED(event);

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

	int width = this->width();
	int height = this->height();

	// draw axis
	painter.drawLine(0, height / 2, width, height / 2); // X
	painter.drawLine(width / 2, 0, width / 2, height); // Y

	int samples = 100; // sample number
	double step = static_cast<double>(width) / samples;

	// sin curve
	painter.setPen(Qt::blue);
	QPointF lastPoint(0, height / 2 - sin(0) * height / 2);
	for (int i = 1; i <= samples; ++i) {
		double x = i * step;
		double y = height / 2 - sin(x / width * 4 * M_PI) * height / 2;
		painter.drawLine(lastPoint, QPointF(x, y));
		lastPoint = QPointF(x, y);
	}

	// cos curve
	painter.setPen(Qt::red);
	lastPoint = QPointF(0, height / 2 - cos(0) * height / 2);
	for (int i = 1; i <= samples; ++i) {
		double x = i * step;
		double y = height / 2 - cos(x / width * 4 * M_PI) * height / 2;
		painter.drawLine(lastPoint, QPointF(x, y));
		lastPoint = QPointF(x, y);
	}
}

??

4、编译和测试

? ? ? ? 编译和测试就比较简单了，如果显示没有问题，那就代表是正确的；反之，就是有问题了。具体是显示的问题，还是计算的问题，这个就要去单步debug一下才知道了。

5、动态的正弦和余弦

? ? ? ? 上面测试的正弦和余弦虽然没有问题，但是不知道大家有没有想过，如何才能让这两组曲线动起来呢。其实，方法就在于定时器和曲线的相位，首先需要在QtWidgetsApplication.h添加变量，即定时器、phase和定时器槽函数，

#pragma once

#include <QtWidgets/QMainWindow>
#include <QTimer>
#include "ui_QtWidgetsApplication.h"

class QtWidgetsApplication : public QMainWindow
{
	Q_OBJECT

public:
	QtWidgetsApplication(QWidget *parent = nullptr);
	~QtWidgetsApplication();

private:
	Ui::QtWidgetsApplicationClass ui;

protected:
	void paintEvent(QPaintEvent *event);

private slots:
	void updateAnimation();

private:
	QTimer *timer;
	double phase;
};

? ? ? ? 做好了这一点，QtWidgetsApplication.cpp也做做出修改，相关的动作包括初始化定时器、实现定时器回调函数、根据phase重新绘制曲线。这里面需要注意的就是update函数，它会触发窗口重新绘制。

#include <QtWidgets>
#include "QtWidgetsApplication.h"

QtWidgetsApplication::QtWidgetsApplication(QWidget *parent)
	: QMainWindow(parent)
{
	ui.setupUi(this);

	timer = new QTimer(this);
	connect(timer, &QTimer::timeout, this, &QtWidgetsApplication::updateAnimation);
	timer->start(50); // timer interval is 50ms
	phase = 0.0;
}

// destructor function
QtWidgetsApplication::~QtWidgetsApplication()
{
}

void QtWidgetsApplication::paintEvent(QPaintEvent *event)  {
	Q_UNUSED(event);

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

	int width = this->width();
	int height = this->height();

	// draw axis
	painter.drawLine(0, height / 2, width, height / 2); // X
	painter.drawLine(width / 2, 0, width / 2, height); // Y

	int samples = 100; // sample
	double step = static_cast<double>(width) / samples;

	// draw sin
	painter.setPen(Qt::blue);
	QPointF lastPoint(0, height / 2 - sin(phase) * height / 2);
	for (int i = 1; i <= samples; ++i) {
		double x = i * step;
		double y = height / 2 - sin(x / width * 4 * M_PI + phase) * height / 2;
		painter.drawLine(lastPoint, QPointF(x, y));
		lastPoint = QPointF(x, y);
	}

	// draw cos
	painter.setPen(Qt::red);
	lastPoint = QPointF(0, height / 2 - cos(phase) * height / 2);
	for (int i = 1; i <= samples; ++i) {
		double x = i * step;
		double y = height / 2 - cos(x / width * 4 * M_PI + phase) * height / 2;
		painter.drawLine(lastPoint, QPointF(x, y));
		lastPoint = QPointF(x, y);
	}
}

void QtWidgetsApplication::updateAnimation() {
	phase += 0.1; // update phase
	update();     // trigger painter
}