1 QPainter
Qt 的绘图系统允许使用相同的 API 在屏幕和其它打印设备上进行绘制。整个绘图系统基于QPainter,QPainterDevice和QPaintEngine三个类。
QPainter用来执行绘制的操作;
QPaintDevice是一个二维空间的抽象,这个二维空间允许QPainter在其上面进行绘制,也就是QPainter工作的空间;QPaintEngine提供了画笔(QPainter)在不同的设备上进行绘制的统一的接口。
QPaintEngine类应用于QPainter和QPaintDevice之间,通常对开发人员是透明的。除非你需要自定义一个设备,否则你是不需要关心QPaintEngine这个类的。我们可以把QPainter理解成画笔;把QPaintDevice理解成使用画笔的地方,比如纸张、屏幕等;而对于纸张、屏幕而言,肯定要使用不同的画笔绘制,为了统一使用一种画笔,我们设计了QPaintEngine类,这个类让不同的纸张、屏幕都能使用一种画笔。
下图给出了这三个类之间的层次结构:
头文件 #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); }
注意:
这里我们给出了两张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); }
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; }