Qt深入浅出（十二）2D绘图

2D绘图

​ 之前我们使用 QPainter 在 QWidget 上绘图, 那么其实 QPainter 还能在任何 QPaintDevice上绘制, 继承至QPaintDevice 还有QPixMap、QImage、QPicture,那么它们的区别是.​ 1、使用 QPixMap 进行绘图，根据硬件显示进行优化.​ 2、使用 QImage 进行绘图，独立与硬件，保存最原始的图片数据.​ 3、QPicture,可以记录和重现 QPainter 命令​

​ 将所有需要绘制的图形，先绘制在 QPixmap QImage QPicture 中， 绘制完成后，再到paintEvent 中一次性绘制出来，可以大大提高 painterEvent 事件处理器的处理效率，可以有效避免绘制过程出现卡顿。

1 在QPixmap上绘图

​ 先把所有的图形元素都画在 QPixmap 对象上面，然后再通过调用 update()， 去调度 paintEvent绘制出 QPixmap 对象的内容。QPixmap 对象可以使用save()，来保存成一个图片文件。

​ 例如：

​ Widget.h

   
   

#ifndef WIDGET_H
#define WIDGET_H
​
#include <QWidget>
#include <QPixmap>
class Widget : public QWidget
{
  Q_OBJECT
​
public:
  Widget(QWidget *parent = 0);
  ~Widget();
  void paintEvent(QPaintEvent* ev);
public slots:
  void drawPixmap();
private:
  QPixmap* _pixmap;
};
​
#endif // WIDGET_H
   
   

​ widget.cpp

   
   

#include "widget.h"
#include <QDebug>
#include <QPainter>
#include <QDialog>
#include <QHBoxLayout>
#include <QPushButton>
​
Widget::Widget(QWidget *parent)
 : QWidget(parent)
{
  this->resize(400, 400);
  _pixmap = new QPixmap(this->size());
  _pixmap->fill(QColor(0, 0, 0, 0)); //填充透明,默认是黑色
​
/*dialog for controlling*/
  QDialog* dialog = new QDialog(this);
  QPushButton* button = new QPushButton("drawPixmap", dialog);
  QHBoxLayout* hBox = new QHBoxLayout(dialog);
  connect(button, SIGNAL(clicked()), this, SLOT(drawPixmap()));
  hBox->addWidget(button);
  dialog->setLayout(hBox);
  dialog->show();
}
​
void Widget::drawPixmap()
{
  QPainter painter;
  painter.begin(_pixmap);
  painter.drawLine(0, 0, 100, 100);
  painter.drawRect(100, 100, 100, 100);
  painter.end();
  qDebug() << __FUNCTION__ << endl;
  this->update(); //画完之后调用update();
}
void Widget::paintEvent(QPaintEvent* ev)
{
  QPainter painter;
  painter.begin(this);
  painter.drawPixmap(0, 0, *_pixmap);
  painter.end();
​
}
Widget::~Widget()
{
  delete _pixmap;
}
​
   
   

​ 需要注意的是QPixmap不继承自QObject无法使用内存托管机制，需要显示释放内存。

2 在QImage上绘图

​ 先把所有的图形元素都画在QImage对象上面，然后再通过调用update()，去调度paintEvent绘制出QImage对象的内容.。QImage对象可以使用save()，来保存成一个图片。

​ 需要注意的是QImage的初始化方式与QPixmap的不同。

​ widget.h

   
   

#ifndef WIDGET_H
#define WIDGET_H
​
#include <QWidget>
#include <QImage>
​
class Widget : public QWidget
{
  Q_OBJECT
​
public:
  Widget(QWidget *parent = 0);
  ~Widget();
  void paintEvent(QPaintEvent* ev);
public slots:
  void drawImage();
private:
  QImage* _image;
};
​
#endif // WIDGET_H
   
   

​ widget.cpp

   
   

#include "widget.h"
#include <QDebug>
#include <QPainter>
#include <QDialog>
#include <QHBoxLayout>
#include <QPushButton>
​
Widget::Widget(QWidget *parent)
 : QWidget(parent)
{
  this->resize(400, 400);
  /*初始化的方式不同*/
  _image = new QImage(this->size(), QImage::Format_ARGB32_Premultiplied);
  _image->fill(QColor(0, 0, 0, 0)); //填充透明,默认是黑色
​
​
/* dialog controlling*/
  QDialog* dialog = new QDialog(this);
  QPushButton* button = new QPushButton("drawImage", dialog);
  QHBoxLayout* hBox = new QHBoxLayout(dialog);
  connect(button, SIGNAL(clicked()), this, SLOT(drawImage()));
  hBox->addWidget(button);
  dialog->setLayout(hBox);
  dialog->show();
}
​
void Widget::drawImage()
{
  QPainter painter;
  painter.begin(_image);
  painter.drawLine(0, 0, 100, 100);
  painter.drawRect(100, 100, 100, 100);
  painter.end();
  qDebug() << __FUNCTION__ << endl;
  this->update(); //画完之后调用update();
}
​
void Widget::paintEvent(QPaintEvent* ev)
{
  QPainter painter;
  painter.begin(this);
  painter.drawImage(0, 0, *_image);
  painter.end();
​
}
​
Widget::~Widget()
{
  delete _image;
}
   
   

3 在QPicture上绘图

​ 先把所有的图形元素都画在QPicture对象上面,然后再通过调用update()，去调度paintEvent绘制出QPicture对象的内容。QPicture对象可以使用save()，来保存成一个文件。与QImage QPixmap的不同之处在于，QPicture强调的画图的动作的记录, 然后保存的文件不是一张图片。

   
   

#include "widget.h"
#include <QDebug>
#include <QPainter>
#include <QDialog>
#include <QHBoxLayout>
#include <QPushButton>
​
Widget::Widget(QWidget *parent)
 : QWidget(parent)
{
  this->resize(400, 400);
  _picture = new QPicture;
​
​
/*dialog for controlling*/
  QDialog* dialog = new QDialog(this);
  QPushButton* button = new QPushButton("drawPicture", dialog);
  QHBoxLayout* hBox = new QHBoxLayout(dialog);
  connect(button, SIGNAL(clicked()), this, SLOT(drawPicture()));
  hBox->addWidget(button);
  dialog->setLayout(hBox);
  dialog->show();
}
​
void Widget::drawPicture()
{
  qDebug() << __FUNCTION__ << endl;
  QPainter painter;
  painter.begin(_picture);
  painter.drawLine(0, 0, 100, 100);
  painter.drawRect(100, 100, 100, 100);
  painter.end();
  this->update(); //画完之后调用update();
}
​
void Widget::paintEvent(QPaintEvent* ev)
{
  QPainter painter;
  painter.begin(this);
  painter.drawPicture(0, 0, *_picture);
  painter.end();
​
}
​
Widget::~Widget()
{
  delete _picture;
}
   
   

4 绘制不规则窗体

​ 绘制不规则窗体的步骤如下：

1. 顶级窗口设置为无边框 setWindowFlags(Qt::FramelessWindowHint);

2. 顶级窗口设置为透明窗体 setAttribute(Qt::WA_TranslucentBackground);

3. 重新实现paintEvent事件处理机制。绘制出一张图片出来。