【快速上手QT】05-绘画Paint

我们写一个QT程序，说实话，很难昧着良心说这个QT界面很好看（技术高超的小伙伴请忽略我这句话）。但是我们可以使用绘画事件来弥补一下“相貌丑陋”的这个缺点。

paintEvent

我们可以对主界面进行绘图，从而达到美化界面的效果。

在QT助手中搜索QWidget我们可以发现下面这个函数，我们要用的就是它——绘图事件。

我们需要在这个绘图事件中对界面进行绘图。在绘图事件之外的地方进行绘画是无效的。

我们绘图的话使用的是QPainter这个类。

QPainter

可以从上面看出它没有父类了，这样就比较省事了，因为我们需要什么函数直接在这边找就可以了，而不用动不动就翻它的父类去找。

一般来说要用它去画一些什么东西，它的成员函数名就是drawXXX，因此只要你英语够好，那么甚至都不需要QT助手，只需要靠IDE的代码提示就可以自由绘画。

绘画的相关函数比较多，并且重载也多，大家自己去QT助手里找，我下面就直接进行演示。

#include "Zhetu.h"

#include <qdebug.h>
#include <qpainter.h>

void Zhetu::paintEvent(QPaintEvent* e) {
	QPainter* paint = new QPainter(this);
	for (int i = 1; i < 100; i++) {
		paint->drawPoint(i, 100);
	}
	paint->drawEllipse(100, 100, 100, 100);
	paint->drawLine(50, 50, 200, 200);
	paint->drawRect(80, 80, 100, 100);
}

Zhetu::Zhetu(QWidget *parent): QMainWindow(parent){
	this->setFixedSize(500, 500);

}

Zhetu::~Zhetu()
{}

我上面使用了画圆，矩阵，线，点的函数，因为一个点不明显，所以我画了一百个，一百个点连起来也变成了一条线。

然后上面的我们基本上用不到，因为如我们所见，画出来的很丑，所以我们一般是自己另外画一个比较好看的图片然后再贴到页面上的，就跟网页前端一样，是可以自己画一些线条，但是大部分情况下都是直接贴图的。

那么接下来我们就需要使用QPainter去画一个图片了。

画图以及添加加载资源

一般情况下没有别的要求的时候，我们画图用的成员函数是drawPixmap。

重载函数有下面这么多个，但是我个人常用的还是红框框起来的最后一个。

可以看的出来，参数的意思就是指定绘图的左上角顶点的x和y坐标，以及这个图片的宽高，最后一个参数给一个QPixmap类型的变量，可以知道这个QPixmap就是用来指定我们画什么图片的。

这边补充一下之前没提的点，那就是绘图中的x轴和y轴，跟我们数学中的xy轴差不多，只不过不同的是QT中的y轴的正反方向是反过来的，其他一样。

我们再来看看QPixmap这个类。

它的众多构造函数里我们注意我红框框起来的这个，我们一般情况下只需要传入一个参数即可，那就是第一个参数——文件路径。

这个文件路径可以填相对路径也可以填绝对路径。

但是我们一般填的是QT的资源路径。

也就是我们需要自己去添加的资源，我们先双击打开.prc文件。

点开后我们可以发现我们的资源是一片空白。这时候我们点击我方框框起来的add，先选择add prefix添加前缀，我们先随便起一个名字（一般是和我们需要添加的资源相关的名字）

在圆框里选中其中一个前缀之后再点击add，这一次我们选择add files，然后选择我们要添加的文件资源。需要注意的是需要和我们的工程文件在同一个目录或是子目录下，并且路径不能有中文！！！！！！！

添加完保存完之后我们就可以回到代码里使用了。

#include "Zhetu.h"

#include <qdebug.h>
#include <qpainter.h>

void Zhetu::paintEvent(QPaintEvent* e) {
	QPainter* paint = new QPainter(this);
	QPixmap p(":/images/image/background.png");
	paint->drawPixmap(0, 0, 650, 400, p);
}

Zhetu::Zhetu(QWidget *parent): QMainWindow(parent){
	this->setFixedSize(650, 400);
}

Zhetu::~Zhetu()
{}

使用方法也很简单，也就是在写文件路径的时候改为冒号：加上我们之间添加的资源路径前缀，再加上文件路径。

甚至如果你嫌太长了，还可以给资源文件路径起个别名，这样子别名就可以代替文件路径，也就是变成冒号加前缀加别名。

效果是一样的。

绘画刷新

有些时候我们需要让图片动起来，那么我们就需要频繁地更改绘画的内容，也就是说需要频繁地触发绘画事件。这时候就需要说一下触发绘画事件的条件了，就是加载页面以及我们手动调用update函数的时候了。

当我们打开程序的时候，页面初次加载，自然是会自动触发绘画事件。而我们将程序最小化之后再打开，也是会触发绘画事件的。而我们手动地调用update函数的时候也是会触发绘画事件。

因此我如果需要让界面动起来，那么会配合定时器事件，在定时器事件里调用update，使得整个界面具有动画效果。

#include "Zhetu.h"

#include <qdebug.h>
#include <qpainter.h>

int cx = 0, cy = 100;
void Zhetu::paintEvent(QPaintEvent* e) {
	QPainter* paint = new QPainter(this);
	QPixmap p(":/images/b");
	paint->drawPixmap(0, 0, 650, 400, p);

	QPixmap chick(":/images/c");
	paint->drawPixmap(cx, cy, 50, 50, chick);
	cx += 5;
}

void Zhetu::timerEvent(QTimerEvent* e){
	update();
}

Zhetu::Zhetu(QWidget *parent): QMainWindow(parent){
	this->setFixedSize(650, 400);
	this->startTimer(40);
}

Zhetu::~Zhetu()
{}

我们人眼能感到流畅的画面帧数是25左右，因此我这边定时器设为40ms一次，每次定时器都调用update。

在绘画事件中每次都将坤坤的x轴坐标加上5个像素点，这样我们就可以得到一个移动的坤坤了。

小结

这个系列写到第五篇了，小伙伴们自己去查一查检测按键输入的相关操作之后就可以尝试去写一下我之前xxx行代码写一个xxx系列的QT小游戏了。

关于QT，可以说是非常简单的，主要就是要动手多练，所以各位小伙伴多多加油吧。