本篇读书笔记主要记录QPainter的复合模式&&双缓冲绘图&&绘图中的其他问题
大纲:
复合模式
双缓冲绘图
绘图中的其他问题
重绘事件
剪切
读入和写入图像
播放GIF
渲染SVG
复合模式
QPainter提供了复合模式(Composition Modes)来定义如何完成数字图像的复合,即如何将源图像的像素和目标图像的像素进行合并。QPainter 提供的常用复合模式及其效果如下面截图所示,所有的复合模式可以在QPainter的帮助文档中进行查看。
最普通的类型是SourceOver(不设置的话默认是这个)(通常被称为alpha混合),就是正在绘制的源像素混合在已经绘制的目标像素上,源像素的alpha分量定义了它的透明度,这样源图像就会以透明效果在目标图像上进行显示。
若绘图设备是QImage,图像的格式一定要指定为QImage::Format_ARGB32_Premultiplied或者Format_ARGB32,不然复合模式就不会产生任何效果。
当设置了复合模式,它就会应用到所有的绘图操作中,如画笔、画刷、渐变和pixmap/image绘制等。
演示书上的代码:
void Widget::paintEvent(QPaintEvent *) { QPainter painter; QImage image(400,300,QImage::Format_ARGB32_Premultiplied); // 使用绘图设备,绘制到绘图设备上 painter.begin(&image); // 绘制一个矩形 painter.setBrush(Qt::green); painter.drawRect(100,50,200,200); //在四个角分别绘制一个矩形,使用不同的复合模式(composition) painter.setBrush(QColor(0,0,255,150)); //composition没有设置则使用默认的SourceOver painter.drawRect(50,0,100,100); //QPainter::CompositionMode_SourceIn painter.setCompositionMode(QPainter::CompositionMode_SourceIn); painter.drawRect(250,0,100,100); //QPainter::CompositionMode_DestinationOver painter.setCompositionMode(QPainter::CompositionMode_DestinationOver); painter.drawRect(50,200,100,100); //QPainter::CompositionMode_Xor painter.setCompositionMode(QPainter::CompositionMode_Xor); painter.drawRect(250,200,100,100); painter.end(); // 绘制到当前部件(当前绘图设备是QWidget的子类,也就是部件) painter.begin(this); painter.drawImage(0,0,image); }
效果图:
双缓冲绘图
所谓双缓冲(double-buffers)绘图,就是在进行绘制时,先将所有内容都绘制到一个绘图设备(如QPixmap)上,然后再将整个图像绘制到部件上显示出来。
使用双缓冲绘图可以避免显示时的闪烁现象。
从Qt4.0开始,QWidget部件的所有绘制都自动使用了双缓冲,所以一般没有必要在paintEvent()函数中使用双缓冲代码来避免闪烁。
虽然在一般的绘图中无须手动使用双缓冲绘图,不过要想实现一些绘图效果,还是要借助于双缓冲的概念。
下面的程序实现使用鼠标在界面上绘制一个任意大小的矩形的功能。
这里需要两张画布,它们都是QPixmap实例。
其中一个tempPix用来作为临时缓冲区,当鼠标正在拖动矩形进行绘制时,将内容先绘制到tempPix上,然后将tempPix绘制到界面上;
而另一个pix作为缓冲区,用来保存已经完成的绘制。当松开鼠标完成矩形的绘制后,则将tempPix的内容复制到pix上。
为了绘制时不显示拖影,在移动鼠标过程中,每绘制一次都要在刚开始绘制这个矩形的图像上进行绘制,所以需要在每次绘制tempPix之前,先将pix的内容复制到tempPix上。
#include "widget.h" #include "ui_widget.h" #include <QMouseEvent> #include <QPainter> Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) { ui->setupUi(this); pix_buffer_ = QPixmap(400, 300); pix_buffer_.fill(Qt::white); temp_pix_buffer_ = pix_buffer_; is_drawing_ = false; } Widget::~Widget() { delete ui; } void Widget::mousePressEvent(QMouseEvent *event) { if(event->button() == Qt::LeftButton){ //当鼠标左键按下时获取当前位置作为矩形的开始点 start_point_ = event->pos(); is_drawing_ = true; } } void Widget::mouseMoveEvent(QMouseEvent *event) { if(event->button() & Qt::LeftButton){ //当按着鼠标左键进行移动时,获取当前位置作为结束点,绘制矩形 end_point_ = event->pos(); //将缓冲区的内容复制到临时缓冲区,这样进行动态绘制时 //每次都是在缓冲区图像的基上进行绘制,就不会产生拖影现象了 temp_pix_buffer_ = pix_buffer_; // 更新显示 update(); } } void Widget::mouseReleaseEvent(QMouseEvent *event) { if(event->button()== Qt::LeftButton){ //当鼠标左键松开时,获取当前位置为结束点,完成矩形绘制 end_point_ = event->pos(); //标记已经结束绘图 is_drawing_ = false; update(); } } void Widget::paintEvent(QPaintEvent *) { int x = start_point_.x(); int y = start_point_.y(); int width = end_point_.x(); int height = end_point_.y(); QPainter painter; painter.setPen(QColor(Qt::red)); painter.begin(&temp_pix_buffer_); painter.drawRect(x,y,width,height); painter.end(); painter.begin(this); painter.drawPixmap(0,0,temp_pix_buffer_); //如果已经完成了绘制,那么更新缓冲区 if(!is_drawing_){ pix_buffer_ = temp_pix_buffer_; } }
这里先在临时缓冲区中进行绘图,然后将其绘制到界面上。最后判断是否已经完成了绘制,如果是,则将临时缓冲区中的内容复制到缓冲区中,这样就完成了整个矩形的绘制。这个例子中的关键是pix和tempPix的相互复制,如果想将这个程序进行扩展,可以查看一下网站上的涂鸦板序。
与这个例子很相似的一个应用是橡皮筋线,就是我们在Windows桌面上拖动鼠标出现的橡皮筋选择框。Qt中提供了QRubberBand 类来实现橡皮筋线,使用它只需要在几个鼠标事件处理函数中进行设置即可,具体应用可以查看该类的帮助文档。
绘图中的其他问题
重绘事件 paintEvent(QPaintEvent *event)override; protected
前面讲到的所有绘制操作都是在重绘事件处理函数paintEvent()中完成的,它是QWidget类中定义的函数。也就意味着QtWidgets都是绘图设备
一个重绘事件用来重绘一个部件的全部或者部分区域,下面几个原因中的任意一个都会发生重绘事件:
- repaint()函数或者update()函数被调用;
- 被隐藏的部件现在被重新显示;
- other
大部分部件可以简单地重绘它们的全部界面,但是一些绘制比较慢的部件需要进行优化而只绘制需要的区域(可以使用QPaintEvent::region()来获取该区域),这种速度上的优化不会影响结果。
Qt也会通过合并多个重绘事件为一个事件来加快绘制,当update()函数被调用多次,或者窗口系统发送了多个重绘事件时,那么Qt就会合并这些事件成为一个事件,而这个事件拥有最大的需要重绘的区域。
update()函数不会立即进行重绘,要等到Qt返回主事件循环后才会进行,所以多次调用update()函数一般只会引起一次paintEvent()函数调用。
但是调用repaint()函数会立即调用paintEvent()函数来重绘部件,只有在必须立即进行重绘操作的情况下(比如在动画中),才使用repaint()函数。
update()允许Qt优化速度和减少闪烁,但是repaint()函数不支持这样的优化,所以建议一般情况下尽可能使用update()函数。
还要说明一下,在程序开始运行时就会自动发送重绘事件而调用paintEvent()函数。另外,不要在paintEvent()函数中调用update( )或者repaint()函数。
当重绘事件发生时,要更新的区域一般会被擦除,然后在部件的背景上进行绘制。
部件的背景一般可以使用setBackgroundRole( )来指定,然后使用setAutoFillBackground(true)来启用指定的颜色。
例如,使界面显示比较深的颜色,则可以在部件的构造函数中添加如下代码:
setBackgroundRole(QPalette::Dark);
setAutoFillBackgroud(true);
剪切
QPainter可以剪切任何的绘制操作,它可以剪切一个矩形、一个区域或者一个路径中的内容,
这分别可以使用setClipRect()、setClipRegion()和setClipPath()函数来实现。
剪切会在QPainter的逻辑坐标系统中进行。下面的代码实现了剪切一个矩形中的文字:
QPainter painter(this); // 剪切矩形中的内容 painter.setClipRect(10,0,20,10); painter.drawText(10,10,"tudouTestTestTest");
读入和写入图像
要读取图像,最普通的方法是使用QImage或者QPixmap的构造函数,或者调用Qlmage: :load()和QPixmap::load()函数。
Qt中还有一个QImageReader类,该类提供了一个格式无关的接口,可以从文件或者其他设备中读取图像。
QImageReader 类可以在读取图像时提供更多的控制,例如,可以使用setScaledSize()函数将图像以指定的大小进行读取,还可以使用setClipRect()读取图像的一个区域。
由于依赖于图像格式底层的支持,QImageReader的这些操作可以节省内存和加快图像的读取。
另外,Qt还提供了QImageWriter类来存储图像,它支持设置图像格式的特定选项,比如伽玛等级、压缩等级和品质等。
当然,如果不需要设置这些选项,那么可以直接使用Qlmage: :save()和QPixmap::save( )函数。
播放GIF
QMovie类是使用QImageReader来播放动画的便捷类,使用它可以播放不带声音的简单的动画,比如gif文件格式。
这个类提供了很方便的函数来进行动画的开始、暂停和停止等操作。
渲染SVG
可缩放矢量图形( Scalable Vector Graphics,SVG)是一个使用XML来描述二维图形和图形应用程序的语言。
在Qt中可以使用QSvgWidget类加载一个SVG文件,而使用QSvgRenderer类在QSvgWidget中进行SVG文件的渲染。
这两个类的使用很简单,可以参考SVG Generator Example和SVG Viewer Example示例程序。
Qt参考示例和文档
文档:
示例:Image Composition Example , Composition Modes
本篇源代码
https://github.com/tudouloveloli/QtExampleCode
欢迎交流学习,共同进步
限本人水平有限,如有错误请指教,谢谢