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(2);  //设置线宽5pix
    //pen.setColor(Qt::red);  //设置颜色
    pen.setColor(QColor(14, 9, 234)); //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(20, 20, 100, 20);
    p.drawLine(20, 20, 20, 100);
    p.drawLine(20, 100, 100, 100);
    p.drawLine(100, 20, 100, 100);

5）绘制矩形

    //画矩形
    p.drawRect(120, 20, 100, 50);

6）绘制椭圆

    //画圆
    p.drawEllipse(QPoint(170, 150), 50, 25);

5）绘制笑脸

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

    //画笑脸
    p.drawPixmap(x, 180, 80, 80, 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 = 0;
}

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(2);  //设置线宽5pix
    //pen.setColor(Qt::red);  //设置颜色
    pen.setColor(QColor(14, 9, 234)); //rgb设置颜色
    pen.setStyle(Qt::DashLine);  //设置风格
    //把画笔交给画家
    p.setPen(pen);

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

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

    //画矩形
    p.drawRect(120, 20, 100, 50);

    //画圆
    p.drawEllipse(QPoint(170, 150), 50, 25);

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

    p.end();
}

void Widget::on_pushButton_clicked()
{
    x += 20;
    if (x > width()) {
        x = 0;
    }
    //刷新窗口，让窗口重绘制，整个窗口都重绘
    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 = 0);
    ~Widget();

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

private slots:
    void on_pushButton_clicked();

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

};

#endif // WIDGET_H