Qt-绘图

1  简介

参考视频：https://www.bilibili.com/video/BV1XW411x7NU?p=37

参考文档：《Qt教程.docx》

本文简单介绍Qt的绘图与绘图设备。

Qt的绘图系统基于三个类：QPainter，QPainterDevice和QPaintEngine。它们之间的层次关系结构如下：

QPainter：用于执行绘图的操作，可以把它想象成画家；

QPaintDevice：一个二维空间的抽象，这个二维空间允许QPainter在其上进行绘制。想象成画板；

QPaintEngine：提供了画笔（QPainter）在不同的设备上进行绘制的统一的接口。对开发人员透明。

我们可以把QPainter理解成画笔；把QPaintDevice理解成使用画笔的地方，比如纸张、屏幕等；而对于纸张、屏幕而言，肯定要使用不同的画笔绘制，为了统一使用一种画笔，我们设计了QPaintEngine类，这个类让不同的纸张、屏幕都能使用一种画笔。

Qt 的绘图系统实际上是，使用QPainter在QPainterDevice上进行绘制，它们之间使用QPaintEngine进行通讯（也就是翻译QPainter的指令）。

2  测试

下面写个测试代码来进行说明。

功能：在窗口上绘制直线、矩形、椭圆、添加背景图等。

（1）创建一个带ui的QWidget工程

（2）实现过程

我们只需要重写绘图事件处理函数就可以了，也就是void paintEvent(QPaintEvent *event);

如果在窗口绘图，必须放在绘图事件里实现 ；窗口需要重绘的时候（状态改变）绘图事件内部自动调用。

（3）实现效果

最终实现的效果如下：

（4）步骤说明

1）首先，我们需要创建一个绘图对象，并指定绘图设备（也就是准备画家和画板）。有两种方式：

方式一：QPainter p(this);   //创建画家，并指定当前窗口为绘图设备。

方式二：

     QPainter p;    //创建画家对象
     p.begin(this); //指定当前窗口为绘图设备
     //绘图操作
     //p.drawxxxx();
     p.end();

我们这里使用方式二。

2）上图中的线宽以及颜色，我们是使用画笔QPen实现的；上图中矩形和椭圆形中的填充色，我们是使用画刷QBrush实现的。

我们创建了画笔对象和画刷对象之后，需要把它们交给画家，也就是QPainter。

     //定义画笔
     QPen pen;
     pen.setWidth();  //设置线宽5pix
     //pen.setColor(Qt::red);  //设置颜色
     pen.setColor(QColor(, , )); //rgb设置颜色
     pen.setStyle(Qt::DashLine);  //设置风格
     //把画笔交给画家
     p.setPen(pen);

     //创建画刷对象
     QBrush brush;
     brush.setColor(Qt::red);  //设置颜色
     brush.setStyle(Qt::Dense1Pattern);  //设置样式
     //把画刷交给画家
     p.setBrush(brush);

3）绘制背景图

使用drawPixmap函数，有好几种方式，这里说两种：

 //    p.drawPixmap(0, 0, width(), height(), QPixmap(":/new/prefix1/image/superman.jpg"));
     p.drawPixmap(rect(), QPixmap(":/new/prefix1/image/background.png"));  //获取矩形

4）绘制直线

上图中的第一个正方形是用直线拼出来的，绘制直线使用drawLine()函数。

     //画直线
     p.drawLine(, , , );
     p.drawLine(, , , );
     p.drawLine(, , , );
     p.drawLine(, , , );

5）绘制矩形

     //画矩形
     p.drawRect(, , , );

6）绘制椭圆

     //画圆
     p.drawEllipse(QPoint(, ), , );

5）绘制笑脸

上图中显示点击按钮并让笑脸移动是使用update()函数实现的，当我们点击按钮时，就在按钮的槽函数中调用update()进行更新窗口。

     //画笑脸
     p.drawPixmap(x, , , , QPixmap(":/new/prefix1/image/face.png"));

下面给出widget.cpp的完整代码：

 #include "widget.h"
 #include "ui_widget.h"
 #include <QPainter>
 #include <QPen>
 #include <QBrush>

 Widget::Widget(QWidget *parent) :
     QWidget(parent),
     ui(new Ui::Widget)
 {
     ui->setupUi(this);

     x = ;
 }

 Widget::~Widget()
 {
     delete ui;
 }

 void Widget::paintEvent(QPaintEvent *event)
 {
     //方式一：
 //    QPainter p(this);

     //方式二：
     QPainter p;    //创建画家对象
     p.begin(this); //指定当前窗口为绘图设备
     //绘图操作
     //p.drawxxxx();
     //画背景图
 //    p.drawPixmap(0, 0, width(), height(), QPixmap(":/new/prefix1/image/superman.jpg"));
     p.drawPixmap(rect(), QPixmap(":/new/prefix1/image/background.png"));  //获取矩形

     //定义画笔
     QPen pen;
     pen.setWidth();  //设置线宽5pix
     //pen.setColor(Qt::red);  //设置颜色
     pen.setColor(QColor(, , )); //rgb设置颜色
     pen.setStyle(Qt::DashLine);  //设置风格
     //把画笔交给画家
     p.setPen(pen);

     //创建画刷对象
     QBrush brush;
     brush.setColor(Qt::red);  //设置颜色
     brush.setStyle(Qt::Dense1Pattern);  //设置样式
     //把画刷交给画家
     p.setBrush(brush);

     //画直线
     p.drawLine(, , , );
     p.drawLine(, , , );
     p.drawLine(, , , );
     p.drawLine(, , , );

     //画矩形
     p.drawRect(, , , );

     //画圆
     p.drawEllipse(QPoint(, ), , );

     //画笑脸
     p.drawPixmap(x, , , , QPixmap(":/new/prefix1/image/face.png"));

     p.end();
 }

 void Widget::on_pushButton_clicked()
 {
     x += ;
     if (x > width()) {
         x = ;
     }
     //刷新窗口，让窗口重绘制，整个窗口都重绘
     update();  //间接调用paintEvent
 }

widget.h的代码：

 #ifndef WIDGET_H
 #define WIDGET_H

 #include <QWidget>

 namespace Ui {
 class Widget;
 }

 class Widget : public QWidget
 {
     Q_OBJECT

 public:
     explicit Widget(QWidget *parent = );
     ~Widget();

 protected:
     //重写绘图事件
     //如果在窗口绘图，必须放在绘图事件里实现
     //绘图事件内部自动调用，窗口需要重绘的时候（状态改变）
     void paintEvent(QPaintEvent *event);

 private slots:
     void on_pushButton_clicked();

 private:
     Ui::Widget *ui;
     int x;

 };

 #endif // WIDGET_H