QT＜八＞ 绘图事件、绘图设备

Qt 的绘图系统允许使用相同的 API 在屏幕和其它打印设备上进行绘制。整个绘图系统基于QPainter，QPainterDevice和QPaintEngine三个类。

下图给出了这三个类之间的层次结构:

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

一、QPainter 绘图

1）绘图事件 void paintEvent()
重写QWidget的paintEvent()函数。

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {
class Widget;
}
class Widget : public QWidget
{
    Q_OBJECT

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

    //绘图事件
    void paintEvent(QPaintEvent* qe);
private:
    Ui::Widget *ui;
};

2）声明一个画家对象

QPainter接收一个QPaintDevice指针作为参数。QPaintDevice有很多子类，比如QImage，以及QWidget。QPaintDevice可以理解成要在哪里去绘制，而现在我们希望画在这个组件，因此传入的是 this 指针。

 //实例画家类 this指定的是绘图的设备
QPainter painter(this);

3）画线、画圆、画矩形、画文字

//画线
void drawLine(const QLineF &line)
void drawLine(const QLine &line)
void drawLine(int x1, int y1, int x2, int y2)
void drawLine(const QPoint &p1, const QPoint &p2)
void drawLine(const QPointF &p1, const QPointF &p2)

//画圆
void drawEllipse(const QRectF &rectangle)
void drawEllipse(const QRect &rectangle)
void drawEllipse(int x, int y, int width, int height)
void drawEllipse(const QPointF &center, qreal rx, qreal ry)
void drawEllipse(const QPoint &center, int rx, int ry)

//画矩形
void drawRect(const QRectF &rectangle)
void drawRect(int x, int y, int width, int height)
void drawRect(const QRect &rectangle)

//画文字

void drawText(const QPointF &position, const QString &text)
void drawText(const QPoint &position, const QString &text)
void drawText(int x, int y, const QString &text)
void drawText(const QRectF &rectangle, int flags, const QString &text, QRectF *boundingRect = nullptr)
void drawText(const QRect &rectangle, int flags, const QString &text, QRect *boundingRect = nullptr)
void drawText(int x, int y, int width, int height, int flags, const QString &text, QRect *boundingRect = nullptr)
void drawText(const QRectF &rectangle, const QString &text, const QTextOption &option = QTextOption())

    //画直线
    painter.drawLine(QPoint(0,0),QPoint(100,100));
    //画圆  圆心 rx ry
    painter.drawEllipse(QPoint(100,100),50,50);
    //画矩形 x,y,w ,h
    painter.drawRect(QRect(20,20,50,50));
    //画文字 在一个范围内的框内 QRect(x,y,w,h),string
    painter.drawText(QRect(10,200,100,50),"啦啦啦啦啦啦");

4）设置画笔 QPen
设置画笔宽度 、风格

//设置画笔
    QPen pen(QColor(255,0,0));
    //设置画笔宽度
    pen.setWidth(5);
    //设置画笔风格
    pen.setStyle(Qt::DotLine);//虚线
    //使用画笔
    painter.setPen(pen);

5）设置画刷 QBrush
设置画刷 风格

    //设置画刷 填充实心图形颜色
    QBrush brush(Qt::green);
    //设置画刷风格
    brush.setStyle(Qt::Dense7Pattern);
    //使用画刷
    painter.setBrush(brush);

6 示例

#include "widget.h"
#include "ui_widget.h"
#include <QPainter>//画家类
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
}
void Widget::paintEvent(QPaintEvent* qe)
{
    //实例画家类 this指定的是绘图的设备
    QPainter painter(this);


    //画直线
    painter.drawLine(QPoint(0,0),QPoint(100,100));

    //画圆  圆心 rx ry
    painter.drawEllipse(QPoint(100,100),50,50);

    //设置画笔
    QPen pen(QColor(255,0,0));
    //设置画笔宽度
    pen.setWidth(5);
    //设置画笔风格
    pen.setStyle(Qt::DotLine);//虚线
    //使用画笔
    painter.setPen(pen);

    //设置画刷 填充实心图形颜色
    QBrush brush(Qt::green);
    //设置画刷风格
    brush.setStyle(Qt::Dense7Pattern);
    //使用画刷
    painter.setBrush(brush);

    //画矩形 x,y,w ,h
    painter.drawRect(QRect(20,20,50,50));

    //画文字 在一个范围内的框内 QRect(x,y,w,h),string
    painter.drawText(QRect(10,200,100,50),"啦啦啦啦啦啦");
}
Widget::~Widget()
{
    delete ui;
}

二、绘图高级设置

1、抗锯齿
效率低

void setRenderHint(QPainter::RenderHint hint, bool on = true)
enum QPainter::RenderHint
{
	QPainter::Antialiasing
	QPainter::HighQualityAntialiasing
	...
}；

具体使用：

QPainter painter(this);
painter.drawEllipse(QPoint(100,100),100,100);
//设置抗锯齿能力 效率较低
painter.setRenderHint(QPainter::Antialiasing);
painter.drawEllipse(QPoint(300,100),100,100);

2、对画家进行移动

//移动
void QPainter::translate(const QPointF &offset)
void QPainter::translate(const QPoint &offset)
void QPainter::translate(qreal dx, qreal dy)
//保存画家坐标状态
void QPainter::save()
//还原画家坐标状态
void QPainter::restore()

具体使用：

    //画矩形
    painter.drawRect(20,20,100,100);
    //移动画家
    painter.translate(150,0);
    //保存画家状态
    painter.save();

    painter.drawRect(20,20,100,100);
    painter.translate(150,0);

    //还原画家保存的状态
    painter.restore();//恢复到之前保存的坐标

    painter.drawRect(20,20,150,150);

3、利用画家画图片

void QPainter::drawPixmap(const QRectF &target, const QPixmap &pixmap, const QRectF &source)
void QPainter::drawPixmap(const QRect &target, const QPixmap &pixmap, const QRect &source)
void QPainter::drawPixmap(int x, int y, int w, int h, const QPixmap &pixmap, int sx, int sy, int sw, int sh)
void QPainter::drawPixmap(int x, int y, const QPixmap &pixmap, int sx, int sy, int sw, int sh)
void QPainter::drawPixmap(const QPointF &point, const QPixmap &pixmap, const QRectF &source)
void QPainter::drawPixmap(const QPoint &point, const QPixmap &pixmap, const QRect &source)
void QPainter::drawPixmap(const QPointF &point, const QPixmap &pixmap)
void QPainter::drawPixmap(const QPoint &point, const QPixmap &pixmap)
void QPainter::drawPixmap(int x, int y, const QPixmap &pixmap)
void QPainter::drawPixmap(const QRect &rectangle, const QPixmap &pixmap)
void QPainter::drawPixmap(int x, int y, int width, int height, const QPixmap &pixmap)

具体使用：

    ///利用画家画资源图片
    QPainter painter(this);
    painter.drawPixmap(posX,posY,QPixmap(":/Image/up.png"));

4、手动调用绘图事件
利用update

void QWidget::update()

具体示例：
图片会每秒自动往下移动，点击按钮会往右移动

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
namespace Ui {
class Widget;
}
class Widget : public QWidget
{
    Q_OBJECT

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

    //绘图事件
    void paintEvent(QPaintEvent* qe);
private:
    Ui::Widget *ui;
    int posX= 0;
    int posY= 0;
};

#endif // WIDGET_H

#include "widget.h"
#include "ui_widget.h"
#include <QPainter>//画家类
#include <QTimer>
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    //点击移动按钮 移动图片
    connect(ui->btn,&QPushButton::clicked,[=]()
    {
        posX += 20;
        //如果超出屏幕宽度 从0开始
        if(posX > this->width())  //this->height()高
            posX = 0;
        //如果要手动调用绘图事件，用update更新
        update();
    });

    //自动移动
    QTimer* timer = new QTimer(this);
    timer->start(1000);//1S

    connect(timer,&QTimer::timeout,this,[=](){
        posY += 20;
        //如果超出屏幕高度 从0开始
        if(posY > this->height())
            posY = 0;
        //如果要手动调用绘图事件，用update更新
        update();
    });

}
void Widget::paintEvent(QPaintEvent* qe)
{
    ///利用画家画资源图片
    QPainter painter(this);
    painter.drawPixmap(posX,posY,QPixmap(":/Image/up.png"));
}
Widget::~Widget()
{
    delete ui;
}

三、绘图设备

绘图设备是指继承QPainterDevice的子类。Qt一共提供了四个这样的类，分别是QPixmap、QBitmap、QImage和 QPicture。其中，

• QPixmap专门为图像在屏幕上的显示做了优化
• QBitmap是QPixmap的一个子类，它的色深限定为1，可以使用 QPixmap的isQBitmap()函数来确定这个QPixmap是不是一个QBitmap。
• QImage专门为图像的像素级访问做了优化。
• QPicture则可以记录和重现QPainter的各条命令。

1、QPixmap

QPixmap继承了QPaintDevice，因此，可以使用QPainter直接在上面绘制图形。
QPixmap也可以接受一个字符串作为一个文件的路径来显示这个文件，比如想在程序之中打开png、jpeg之类的文件，就可以使用 QPixmap。
使用QPainter的drawPixmap()函数可以把这个文件绘制到一个QLabel、QPushButton或者其他的设备上面。
QPixmap是针对屏幕进行特殊优化的，因此，它与实际的底层显示设备息息相关。

//PixMap绘图设备 专门为平台做了显示的优化
QPixmap pix(300,300);
//默认为黑色
//填充颜色 白色
pix.fill(Qt::white);
//声明画家
QPainter painter(&pix);
//设置画笔颜色
painter.setPen(Qt::green);
painter.drawEllipse(QPoint(150,150),100,100);
//保存到电脑上
pix.save("D:/pix.png");

2、QBitmap
QBitmap继承自QPixmap，因此具有QPixmap的所有特性，提供单色图像。
QBitmap的色深始终为1. 色深这个概念来自计算机图形学，是指用于表现颜色的二进制的位数。计算机里面的数据都是使用二进制表示的。为了表示一种颜色，我们也会使用二进制。比如我们要表示8种颜色，需要用3个二进制位，这时色深是3. 因此，所谓色深为1，也就是使用1个二进制位表示颜色。1个位只有两种状态：0和1，因此它所表示的颜色就有两种，黑和白。所以说，QBitmap实际上是只有黑白两色的图像数据。
由于QBitmap色深小，因此只占用很少的存储空间，所以适合做光标文件和笔刷。

void PaintWidget::paintEvent(QPaintEvent *)
{
    QPixmap pixmap(":/Image/butterfly.png");
    QPixmap pixmap1(":/Image/butterfly1.png");
    QBitmap bitmap(":/Image/butterfly.png");
    QBitmap bitmap1(":/Image/butterfly1.png");

    QPainter painter(this);
    painter.drawPixmap(0, 0, pixmap);
    painter.drawPixmap(200, 0, pixmap1);
    painter.drawPixmap(0, 130, bitmap);
    painter.drawPixmap(200, 130, bitmap1);
}

白色的背景在QBitmap中消失了，而透明色在QBitmap中转换成了黑色；其他颜色则是使用点的疏密程度来体现的。

3、QImage

QImage则是使用独立于硬件的绘制系统，实际上是自己绘制自己，因此提供了像素级别的操作，并且能够在不同系统之上提供一个一致的显示形式。

简单使用例子：
声明了一个QImage对象，大小是300 x 300，颜色模式是RGB32，即使用32位数值表示一个颜色的RGB值，也就是说每种颜色使用8位。

//QImage绘图设备 可以对像素进行访问
QImage img(300,300,QImage::Format_RGB32);
//默认黑色 填充颜色
img.fill(Qt::white);

QPainter painter(&img);
painter.setPen(Qt::blue);
painter.drawEllipse(QPoint(150,150),100,100);
//保存
img.save("D:/img.png");

利用QImage 对像素进行修改：

//绘图事件
void Widget::paintEvent(QPaintEvent *pe)
{//利用QImage 对像素进行修改
   QPainter painter(this);
   QImage img;
   //加载资源文件
   img.load(":/Image/sunny.png");
   //修改像素点
   for(int i =100;i<150;i++)
   {
       for(int j =100;j<150;j++)
       {
           QRgb value = qRgb(0,255,255);
           img.setPixel(i,j,value);
       }
   }
   painter.drawImage(0,0,img);
}

QImage与QPixmap的区别

• QPixmap主要是用于绘图，针对屏幕显示而最佳化设计，QImage主要是为图像I/O、图片访问和像素修改而设计的
• QPixmap依赖于所在的平台的绘图引擎，故例如反锯齿等一些效果在不同的平台上可能会有不同的显示效果，QImage使用Qt自身的绘图引擎，可在不同平台上具有相同的显示效果
• 由于QImage是独立于硬件的，也是一种QPaintDevice，因此我们可以在另一个线程中对其进行绘制，而不需要在GUI线程中处理，使用这一方式可以很大幅度提高UI响应速度。
• QImage可通过setPixpel()和pixel()等方法直接存取指定的像素。

QImage与QPixmap之间的转换:

• QImage转QPixmap
  使用QPixmap的静态成员函数: fromImage()

  QPixmap	fromImage(const QImage & image, 
  Qt::ImageConversionFlags flags = Qt::AutoColor)
  

• QPixmap转QImage:
  使用QPixmap类的成员函数: toImage()

  QImage toImage() const
  

4、QPicture

QPicture是一个可以记录和重现QPainter命令的绘图设备。

QPicture将QPainter的命令序列化到一个IO设备，保存为一个平台独立的文件格式。这种格式有时候会是“元文件(meta- files)”。Qt的这种格式是二进制的，不同于某些本地的元文件，Qt的pictures文件没有内容上的限制，只要是能够被QPainter绘制的元素，不论是字体还是pixmap，或者是变换，都可以保存进一个picture中。

QPicture是平台无关的，因此它可以使用在多种设备之上，比如svg、pdf、ps、打印机或者屏幕。QPicture使用系统的分辨率，并且可以调整 QPainter来消除不同设备之间的显示差异。

如果要记录下QPainter的命令，首先要使用QPainter::begin()函数，将QPicture实例作为参数传递进去，以便告诉系统开始记录，记录完毕后使用QPainter::end()命令终止。代码示例如下：

 //QPicture 绘图设备 可以记录和重现绘图指令
 QPicture pic;
 QPainter painter;
 //指定画图设备 开始往Pic上画
 painter.begin(&pic);
 painter.setPen(QPen(Qt::black));
 painter.drawEllipse(QPoint(150,150),100,100);
 painter.end();//结束
 //保存到磁盘
 pic.save("D:/pic.aaa");//后缀无法直接打开

//绘图事件
void Widget::paintEvent(QPaintEvent *pe)
{
	//重现QPicture绘图指令
	QPicture pic;
	pic.load("D:/pic.aaa");//加载绘图指令
	QPainter painter(this);
	painter.drawPicture(0,0,pic);
}