文章目录

1 QPainter

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

QPainter用来执行绘制的操作；
QPaintDevice是一个二维空间的抽象，这个二维空间允许QPainter在其上面进行绘制，也就是QPainter工作的空间；QPaintEngine提供了画笔（QPainter）在不同的设备上进行绘制的统一的接口。
QPaintEngine类应用于QPainter和QPaintDevice之间，通常对开发人员是透明的。除非你需要自定义一个设备，否则你是不需要关心QPaintEngine这个类的。我们可以把QPainter理解成画笔；把QPaintDevice理解成使用画笔的地方，比如纸张、屏幕等；而对于纸张、屏幕而言，肯定要使用不同的画笔绘制，为了统一使用一种画笔，我们设计了QPaintEngine类，这个类让不同的纸张、屏幕都能使用一种画笔。
下图给出了这三个类之间的层次结构:
Qt 5——绘图和绘图设备_Qt

头文件

#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();

private:
    Ui::Widget *ui;

public:
    //绘图事件
    void paintEvent(QPaintEvent *);

    int posX;

};

#endif // WIDGET_H



源文件

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


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

    //点击移动按钮 移动图片

    posX = 10;

    connect(ui->pushButton,&QPushButton::clicked,[=](){
        posX += 10;

        //手动调用绘图事件
        update();

    });

}

void Widget::paintEvent(QPaintEvent *)
{
    //创建画家
    QPainter painter(this);

    //如果出屏幕 强制变回10
    if(posX > this->width())
    {
        posX = 10;
    }

    //画图片
    painter.drawPixmap(posX,100,QPixmap(":/Image/OnePiece.png"));


    高级设置
    painter.drawEllipse( QPoint(100,100),50,50);
    //设置抗锯齿 效率低
    painter.setRenderHint(QPainter::Antialiasing);
    painter.drawEllipse( QPoint(200,100),50,50);


    painter.drawRect( QRect(20,20,50,50));

    //移动画家
    painter.translate(QPoint(100,0));

    //保存状态
    painter.save();

    painter.drawRect( QRect(20,20,50,50));

    painter.translate(QPoint(100,0));
    //取出状态
    painter.restore();

    painter.drawRect( QRect(20,20,50,50));


    //设置画笔颜色
    QPen pen(QColor(255,0,0));
    //设置笔宽度
    pen.setWidth(3);
    //设置笔风格
    pen.setStyle(Qt::DotLine);
    //画家用这只笔
    painter.setPen(pen);

    //画刷填充颜色
    QBrush brush(Qt::cyan);
    //让画家使用画刷
    brush.setStyle(Qt::Dense4Pattern);
    painter.setBrush(brush);


    //利用画家画画
    //画线
    painter.drawLine(QPoint(0,0),QPoint(100,100));

    //画圆(椭圆)
    painter.drawEllipse(QPoint(100,100),50,50);

    //画矩形
    painter.drawRect(QRect(10,10,50,50));

    //画字体
    painter.drawText(QRect(10,200,150,50),"好好学习，天天向上");



}

Widget::~Widget()
{
    delete ui;
}
2 绘图设备

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

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

QPixmap

QPixmap继承了QPaintDevice，因此，你可以使用QPainter直接在上面绘制图形。QPixmap也可以接受一个字符串作为一个文件的路径来显示这个文件，比如你想在程序之中打开png、jpeg之类的文件，就可以使用 QPixmap。使用QPainter的drawPixmap()函数可以把这个文件绘制到一个QLabel、QPushButton或者其他的设备上面。QPixmap是针对屏幕进行特殊优化的，因此，它与实际的底层显示设备息息相关。注意，这里说的显示设备并不是硬件，而是操作系统提供的原生的绘图引擎。所以，在不同的操作系统平台下，QPixmap的显示可能会有所差别。

QBitmap

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

下面我们来看同一个图像文件在QPixmap和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);
}

Qt 5——绘图和绘图设备_Qt_02
注意：
这里我们给出了两张png图片。butterfly1.png是没有透明色的纯白背景，而butterfly.png是具有透明色的背景。我们分别使用QPixmap和QBitmap来加载它们。注意看它们的区别：白色的背景在QBitmap中消失了，而透明色在QBitmap中转换成了黑色；其他颜色则是使用点的疏密程度来体现的。

QPixmap

QPixmap使用底层平台的绘制系统进行绘制，无法提供像素级别的操作。

QImage

QImage则是使用独立于硬件的绘制系统，实际上是自己绘制自己，因此提供了像素级别的操作，并且能够在不同系统之上提供一个一致的显示形式。
我们声明了一个QImage对象，大小是300 x 300，颜色模式是RGB32，即使用32位数值表示一个颜色的RGB值，也就是说每种颜色使用8位。然后我们对每个像素进行颜色赋值，从而构成了这个图像。我们可以把QImage想象成一个RGB颜色的二维数组，记录了每一像素的颜色。

看一个例子

void PaintWidget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QImage image(300, 300, QImage::Format_RGB32);
    QRgb value;

    //将图片背景填充为白色
    image.fill(Qt::white);

    //改变指定区域的像素点的值
    for(int i=50; i<100; ++i)
    {
        for(int j=50; j<100; ++j)
        {
            value = qRgb(255, 0, 0); // 红色
            image.setPixel(i, j, value);
        }
    }

    //将图片绘制到窗口中
    painter.drawImage(QPoint(0, 0), image);
}

Qt 5——绘图和绘图设备_Qt_03

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

QPicture

最后一个需要说明的是QPicture。这是一个可以记录和重现QPainter命令的绘图设备。 QPicture将QPainter的命令序列化到一个IO设备，保存为一个平台独立的文件格式。这种格式有时候会是“元文件(meta- files)”。Qt的这种格式是二进制的，不同于某些本地的元文件，Qt的pictures文件没有内容上的限制，只要是能够被QPainter绘制的元素，不论是字体还是pixmap，或者是变换，都可以保存进一个picture中。
QPicture是平台无关的，因此它可以使用在多种设备之上，比如svg、pdf、ps、打印机或者屏幕。回忆下我们这里所说的QPaintDevice，实际上是说可以有QPainter绘制的对象。QPicture使用系统的分辨率，并且可以调整 QPainter来消除不同设备之间的显示差异。
如果我们要记录下QPainter的命令，首先要使用QPainter::begin()函数，将QPicture实例作为参数传递进去，以便告诉系统开始记录，记录完毕后使用QPainter::end()命令终止。代码示例如下：

void PaintWidget::paintEvent(QPaintEvent *)
{
    QPicture pic;
    QPainter painter;
	 //将图像绘制到QPicture中,并保存到文件
    painter.begin(&pic);
    painter.drawEllipse(20, 20, 100, 50);
    painter.fillRect(20, 100, 100, 100, Qt::red);
    painter.end();
    pic.save("D:\\drawing.pic");

	 //将保存的绘图动作重新绘制到设备上
    pic.load("D:\\drawing.pic");
    painter.begin(this);
    painter.drawPicture(200, 200, pic);
    painter.end();
}

注意：

就被保存成了后缀为pic格式的：pic.save("D:\\drawing.pic");

绘图设备总实例

    
#include "widget.h"
#include "ui_widget.h"
#include <QPainter>
#include <QPicture>

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

    QPixmap 做绘图设备，对不同平台显示做了优化
    QPixmap pix(300,300);
    //设置默认填充色
    pix.fill(Qt::white);
    QPainter painter(&pix);

    painter.setPen(QPen(Qt::green));
    painter.drawEllipse(QPoint(150,150),100,100);
    //保存
    pix.save("E:\\pix.png");


    QImage 做绘图设备  对像素级访问进行了优化
    QImage img(300,300,QImage::Format_RGB32);
    img.fill(Qt::white);
    QPainter painter(&img);
    painter.setPen(QPen(Qt::blue));
    painter.drawEllipse(QPoint(150,150),100,100);
    img.save("E:\\img.png");


    //QPicture 绘图设备
    QPicture pic; //用于重现 记录绘图指令
    QPainter painter;
    painter.begin(&pic);

    painter.setPen(QPen(Qt::cyan));
    painter.drawEllipse(QPoint(150,150),100,100);

    painter.end();
    //保存
    pic.save("E:\\pic.zt");


}

void Widget::paintEvent(QPaintEvent *)
{
    QImage可修改xiangsu
    QImage img;
    img.load(":/Image/Luffy.png");

    for(int i = 50 ; i < 100;i++)
    {
       for(int j = 50 ; j < 100 ;j ++)
       {
           QRgb value = qRgb(255,0,0);
           //设置像素点
            img.setPixel(i,j,value);
       }
    }

    QPainter painter(this);
    painter.drawImage(QPoint(0,0),img);


    //重现绘图指令 QPicture
    QPicture pic;
    pic.load("E:\\pic.zt");
    QPainter painter(this);
    painter.drawPicture(0,0,pic);

}

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