C++梁哥笔记day28

绘图和绘图设备

一、QPainter

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

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

下面给出了这三个类之间的层次结构：

通过上面的示意图，我们可以知道，Qt的绘图系统实际上是，使用QPainter在QPaintDevice上进行绘制，它们之间使用QPaintEngine进行通讯（也就是QPainter的指令）。

案例：

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

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

    virtual void paintEvent(QPaintEvent *event) override;


private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include <QPainter>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
}

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

void Widget::paintEvent(QPaintEvent *event)
{
    //定义一个图片控件
    QPixmap *pixmap = new QPixmap();
    pixmap->load(":/cat.jpg");
    //修改图片大小与窗口一样大
    pixmap->scaled(this->width(),this->height());
    //定义一个画家
    QPainter *painter = new QPainter(this);
    //画家在主窗口上进行绘画
    painter->drawPixmap(0,0,this->width(),this->height(),*pixmap);
    //绘制结束
    //painter->end();
    delete painter;
}

运行结果：

案例：通过 update 重新加载绘图事件

实现图片的移动

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include <QPainter>
#include <QPixmap>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //将按钮移动到下面中间位置
    ui->pushButton->move(this->width()/2-ui->pushButton->width()/2,this->height()-ui->pushButton->height());
    //给按钮绑定函数
    connect(ui->pushButton,&QPushButton::clicked,[=](){
       //重新加载绘图事件（即再次执行重写的绘图事件）
       this->update();
    });
}

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

void Widget::paintEvent(QPaintEvent *e){
    QPixmap pix;
    pix.load(":/goutou.jpg");
    QPainter *paint = new QPainter(this);
    static int x=0;
    paint->drawPixmap(x,20,pix.width(),pix.height(),pix);
    x+=10;
    //如果图片超过窗口右边界 回到原点
    if(x >= this->width()-pix.width()){
        x=0;
    }
    delete paint;
}

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
    virtual void paintEvent(QPaintEvent *e) override;

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

运行结果：

注意：当窗口重新被激活的时候，也会调用重写的绘画事件函数。

案例：画线、举行、圆形、椭圆等

void Widget::paintEvent(QPaintEvent *e){
    QPainter *painter = new QPainter(this);
    //画直线
    painter->drawLine(30,30,100,100);
    //画矩形
    painter->drawRect(30,130,130,80);
    //画圆
    painter->drawEllipse(30,240,100,100);
    //画椭圆
    painter->setPen(Qt::blue);//设置画笔颜色
    //painter->setPen(Qt::DashLine);
    painter->drawEllipse(30,370,120,75);
    //画文字
    painter->setPen(QColor(234, 153, 153, 255));//设置画笔颜色
    painter->drawText(50,520,"哈哈 笨B一个");
    delete painter;
}

运行结果：

二、绘图设备

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

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

就是如果不是在窗口上绘图，就可以绘制在绘图设备上，然后保存起来。

2.1QPixmap、QBitmap、QImage

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

QBitmap继承自QPixmap，因此具有QPixmap的所有特性，提供单色图像。QBitmap的色深始终为1，色深这个概念来自计算机图形学，是指用于表现颜色的二进制的位数（好像计算机组成原理最后一章里面有）。我们知道，计算机里面的数据都是使用二进制表示的。为了表示一种颜色，我们也会使用二进制。比如我们要表示8中颜色，需要使用3个二进制位，这时我们就说色深是3.因此所谓色深为1，也就是使用1个二进制位来表示颜色。1个位只有两个状态：1和0。所以它所表示的颜色就只有两种，黑和白。因此，QBitmap实际上是只有黑白两色的图像数据。

由于QBitmap色深小，因此只占用很少的存储空间，所以适合做光标文件和笔刷。

下面我们来看一个同一个图像文件在QPixmap和QBitmap下的不同表现：

void PaintWidget::painEvent(QPaintEvent *e){
  QPixmap pixmap1(":/image/1.png");
  QPixmap pixmap2(":/image/2.png");
  
  QBitmap bitmap1(":/image/1.png");
  QBitmap bitmap2(":/image/2.png");
  QPainter painter(this);
  painter.drawPixmap(0,0,pixmap1);
  painter.drawPixmap(200,0,pixmap1);
  painter.drawPixmap(0,130,bitap1);
  painter.drawPixmap(200,130,bitmap1);
}

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

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

我们声明了一个QImage对象，大小是300*300，颜色模式是RGB32，即使用32位数值表示一个颜色的RGB值，也就是说每种颜色使用8位。然后我们对每个像素进行颜色赋值，从而构成了这个图像。我们可以把QImage想象成一个RGB颜色的二维数组，记录了每一像素的颜色。

void PaintWidget::paintEvent(QPaintEvent *e){
    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);
}

运行结果：

不在窗口上绘制

img.save();

运行结果：

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;

2.2 QPicture记录绘图指令

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

QPicture是平台无关的，因此它可以使用在多种设备之上，比如svg、pdf、ps、打印机或者屏幕。回忆下我们这里所说的QPaintDevice，实际上是说可以由QPainter绘制的对象。QPicture使用系统的分辨率，并且可以调整QPainter来消除不同设备之间的显示差异。

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

void PainterWidget::paintEvent(QPaintEvent *e){
  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("./drawing.pic");
  
  //将保存的绘图动作重新绘制到设备上
  pic.load("./drawing.pic");
  //painter.begin(this);
  painter.drawPicture(200,200,pic);
  //painter.end();
}

---

三、项目

项目：工业控制UI

1. 注册登录界面

   

2. 动态柱状图界面

   

3. 分类器界面

   

4. 操作记录显示界面

   

5. 密码重置界面

   

6. 串口调试界面

   

7. 比特率选项

   

8. 操作菜单

   

9. 串口选项

   

10. 关于菜单

    

11. 数据位选项

    

12. 停止位选项

    

13. 校验位选项

    

项目：棋牌游戏

系统编程

网络编程：数据封装、数据伪装、数据窃取

服务器开发

物联网：硬件开发、传感器 感知层

平台驱动