首页 Qt 学习之路 2 Qt 学习之路 2(29):绘制设备

Qt 学习之路 2(29):绘制设备

29 5

绘图设备是继承QPainterDevice的类。QPaintDevice就是能够进行绘制的类,也就是说,QPainter可以在任何QPaintDevice的子类上进行绘制。现在,Qt 提供了若干这样的类:

Qt4:

绘制设备(Qt4)

Qt5:

绘制设备(Qt5)

上面的是 Qt4 的相关类图,下面是 Qt5。这两部分大致相同,只是在 Qt5 中,QGLPixelBuffer已经被废弃。本章我们关注的是QPixmapQBitmapQImageQPicture这几个类。另外的部分,QWidget就是所有组件的父类,我们已经在前面的章节中使用过,这里不再赘述。QGLWidgetQGLFramebufferObject,顾名思义,就是关于 OpenGL 的相关类。在 Qt 中,我们可以方便地结合 OpenGL 进行绘制。由于这部分需要牵扯到 OpenGL 的相关内容,现在也不再深入。在我们选择的几个类中,大多与图像密切相关。

QPixmap专门为图像在屏幕上的显示做了优化;QBitmapQPixmap的一个子类,它的色深限定为1,你可以使用QPixmapisQBitmap()函数来确定这个QPixmap是不是一个QBitmapQImage专门为图像的像素级访问做了优化。QPicture则可以记录和重现QPainter的各条命令。下面我们将分两部分介绍这四种绘图设备。

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

QPixmap提供了静态的grabWidget()grabWindow()函数,用于将自身图像绘制到目标上。同时,在使用QPixmap时,你可以直接使用传值的形式,不需要传指针,因为QPixmap提供了“隐式数据共享”。关于这一点,我们会在以后的章节中详细描述。简单来说,就是一般对于大型数据(图像无疑就是这种“大型数据”),为性能起见,通常会采用传指针的方式,但是由于QPixmap内置了隐式数据共享,所以只要知道传递QPixmap

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

下面我们来看同一个图像文件在QPixmapQBitmap下的不同表现:

void paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QPixmap pixmap("qt-logo.png");
    QBitmap bitmap("qt-logo.png");
    painter.drawPixmap(10, 10, 250, 125, pixmap);
    painter.drawPixmap(270, 10, 250, 125, bitmap);
    QPixmap whitePixmap("qt-logo-white.png");
    QBitmap whiteBitmap("qt-logo-white.png");
    painter.drawPixmap(10, 140, 250, 125, whitePixmap);
    painter.drawPixmap(270, 140, 250, 125, whiteBitmap);
}

先来看一下运行结果:

QPixmap 和 QBitmap 示例
这里我们给出了两张 png 图片。qt-logo.png 具有透明背景,qt-logo-white.png 具有白色背景。我们分别使用QPixmapQBitmap来加载它们。注意看它们的区别:白色的背景在QBitmap中消失了,而透明色在QBitmap中转换成了黑色(“黑色”,记住,QBitmap只有两种颜色:黑色和白色);其他颜色则是使用点的疏密程度来体现的。

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

QImage 32bit 存储

QImageQPixmap相比,最大的优势在于能够进行像素级别的操作。我们通过上面的示意图可以看到,我们声明一个 3 x 3 像素的QImage对象,然后利用setPixel()函数进行颜色的设置。你可以把QImage想象成一个 RGB 颜色的二维数组,记录了每一像素的颜色。值得注意的是,在QImage上进行绘制时,不能使用QImage::Format_Indexed8这种格式。

最后一种QPicture是平台无关的,因此它可以使用在多种设备之上,比如 svg、pdf、ps、打印机或者屏幕。回忆下我们曾经说的QPaintDevice,实际上是说可以由QPainter进行绘制的对象。QPicture使用系统分辨率,并且可以调整QPainter来消除不同设备之间的显示差异。如果我们要记录下QPainter的命令,首先要使用QPainter::begin()函数,将QPicture实例作为参数传递进去,以便告诉系统开始记录,记录完毕后使用QPainter::end()命令终止。代码示例如下:

QPicture picture;
QPainter painter;
painter.begin(&picture);             // 在 picture 进行绘制
painter.drawEllipse(10, 20, 80, 70); // 绘制一个椭圆
painter.end();                       // 绘制完成
picture.save("drawing.pic");         // 保存 picture

如果我们要重现命令,首先要使用 QPicture::load() 函数进行装载:

QPicture picture;
picture.load("drawing.pic");           // 加载 picture
QPainter painter;
painter.begin(&myImage);               // 在 myImage 上开始绘制
painter.drawPicture(0, 0, picture);    // 在 (0, 0) 点开始绘制 picture
painter.end();                         // 绘制完成

我们也可以直接使用QPicture::play()进行绘制。这个函数接受一个QPainter对象,也就是进行绘制的画笔。

29 评论

hang 2013年4月11日 - 10:48

楼主你好 我这段代码为什么不能加载图片呢 在qt4下面:

void Dialog::paintEvent(QPaintEvent *)
{

QPainter painter(this);
QPixmap pix;
pix.load("ChessBoard.png");
painter.drawPixmap(0,0,100,100,pix);
}
就显示一个对话框,没有图片

回复
豆子 2013年4月11日 - 19:17

有可能是图片没有找到,还有一种可能是 load() 函数如果是异步的话,可能 drawPixmap() 执行的时候图片并没有加载完。

回复
hang 2013年4月11日 - 19:31

谢谢楼主热情的回复,我找到问题了!但是不知道什么原因,就是把图片放到主文件夹里里面,然后用绝对路径来引用就可以了,不知道为何?
楼主的文章写得很好,还免费供大家阅读,我局觉得比起某些这方面的书籍,你再稍微整理哈,就比他们做的好很多,就可以出版了(呵呵,个人意见,楼主是那样淡泊之人,实在敬佩!)

回复
豆子 2013年4月11日 - 19:46

既然已经找到是路径问题,那就很好解决了。由于你的代码 load("ChessBoard.png"); 中没有指定 ChessBoard.png 的路径,因此在可执行文件运行时,Qt 会去寻找路径中的图片。如果你在 QtCreator 中直接运行,则会去找源代码所在文件夹;如果通过双击 exe 运行,则会去找 exe 同目录中。因此,你需要指定图片的路径。一般而言,如果图片不会改变(例如按钮图标),则应该利用 qrc 编译为二进制格式,会加快运行时性能。文中代码仅作为示例使用,正式项目中并不适用。

回复
hang 2013年4月11日 - 19:55

利用 qrc 编译为二进制格式,是不是只适用于lable之类的标签呢?我是想直接在窗口里加载一张图片,而不是任何标签,我是在ubuntu下的QtCreator里面运行,图片文件夹就在工程文件夹里面,还是无法加载,换成绝对路径以后,无论放哪儿都能加载了,不知道为什么,显然绝对路径导致移植性很差(我刚学Qt,学生一枚,很多深奥的原理不是很懂,但是你写的东西很合适入门,谢谢)

豆子 2013年4月12日 - 09:43

qrc 适用于程序里面使用的图片,比如按钮图片、logo 之类不会经常变动的。它编译成二进制形式,直接嵌入到可执行程序中,不存在路径问题。因为它是编译过的,所以不能在运行时修改,如果要改图片,只能重新编译程序。一般应用程序中使用的图片都是编译的,这样运行时就少了加载的过程,效率更好;只有需要加载用户图片的情况下(比如用户打开一张图片显示),才会使用相对路径。如果在代码文件夹下有图片文件夹(例如 src/images),那么你的图片路径应该是 src/image/XXX.png 这样的。

Sasasu 2016年3月5日 - 21:14

QT Creator默认使用shadow build,所以你要是没有把图片加到资源文件里的话为了编译而创建的新文件夹是没有那张图片的。

回复
WaterWood 2013年5月15日 - 21:14

请问Qt中有没有办法实现不在paintEvent中使用QPainter?因为我仅仅想临时在一个类中的某个方法中调用drawText绘制一个数字的图,然后把这个图的像素抽象成int[][]形式。谢谢!

回复
豆子 2013年5月16日 - 08:57

Qt4 以上版本支持不在 paintEvent() 中进行绘制,具体就是直接创建 QPainter 对象,并且将需要进行绘制的对象指针作为参数传给 QPainter 即可。

回复
memmal 2014年4月19日 - 23:46

豆子,你好。
我遇到一个非常棘手的问题,我载入了资源文件图片,而且调用方法没问题但是显示不出来:
openAction = new QAction(QIcon(":/E:/image/a.png"), tr("&Open..."), this);
openAction->setShortcuts(QKeySequence::Open);
openAction->setStatusTip(tr("Open an existing file"));

saveAction = new QAction(QIcon(":/image/docopen"), tr("&Save..."), this);
saveAction->setShortcuts(QKeySequence::Save);
saveAction->setStatusTip(tr("Save a new file"));

而且这节的图片也没再出来,编译没有问题,弹出窗口了 QPainter painter(this);
QPixmap pixmap("/E:/QT/image/a.png");
QBitmap bitmap("open");
painter.drawPixmap(10, 10, 250, 125, pixmap);
painter.drawPixmap(270, 10, 250, 125, bitmap);
QPixmap whitePixmap("125.jpg");
QBitmap whiteBitmap("125.jpg");
painter.drawPixmap(10, 140, 250, 125, whitePixmap);
painter.drawPixmap(270, 140, 250, 125, whiteBitmap);

回复
豆子 2014年4月21日 - 11:07

应该是图片路径的问题。:/E:/image/a.png 这种路径看起来是错误的。: 代表从资源文件读取,你后面又加了 E:/ 的前缀?: 后面一般是自己定义的图片前缀,在 qrc 里面需要自己设置。

回复
WaterWood 2013年5月16日 - 19:58

4以上?4.8这样写提示说Painter not active,您是说Qt5中支持这样?

回复
豆子 2013年5月17日 - 09:41

不是的,Qt4 就已经支持了。Painter not active 可能是因为你的对象不存在(或者是宽度或高度大小为 0)。另外忘记说明一点,QWidget 及其子类只能重写 paintEvent(),其它 QPaintDevice,例如 QImage、QPixmap 之类则没有这个限制。

回复
WaterWood 2013年5月18日 - 10:33

谢谢!!!You save my life!这个问题刚开始一搜就有人说是Qt不支持云云,然后我也没去仔细去查。。太感谢了

回复
枫亦 2013年7月10日 - 11:43

就是说 painter.begin(this);只能在paintEvent()中使用,如果要实现在其他函数中重绘的话,只能在类中添加继承于QPaintDevice的成员。实际上相当于添加了一个图层。使用前需要在paintEvent()绘制这个图层。但是目前我现在还没找到设置图层上下层关系的方法。可能是我理解不对。请博主详解,谢谢!

回复
豆子 2013年7月10日 - 21:59

如果你认为是一个图层,基本也是正确的。至于图层的顺序,其实也就是绘制函数调用的顺序。记住,绘制系统就是一个状态机,这是我们反复强调过的。因此,如果你把父类的绘制当做一个图层,只要按顺序调用父类的绘制函数就好了。

回复
枫亦 2013年7月12日 - 09:41

理解了,就是说在paintEvent()中顺序绘制其他图层,图层就依次叠加。实际上所有绘制最终还是通过paintEvent()来改变状态机的状态。因为在其他函数中绘制完毕后需要显示的调用update(),而这个函数会去调用paintEvent()。刚刚做了试验证明博主正解,加深了我的理解,谢谢!

Const_Lin 2014年3月10日 - 20:22

豆子你好:
第一段代码,我编译后知显示了一个对话框

回复
Const_Lin 2014年3月10日 - 20:34

不好意思。是最后两段代码。

dreamychi 2015年11月12日 - 15:25

我自己有一个感觉。从源码来看,QImage和QPixmap最大的区别应该是一个是为IO准备的,一个是为绘制准备的。实际上QPixmap里边也是有一个QImage来做图片的保存和读取的。

回复
hlx1996 2015年11月26日 - 21:28

值得注意的是,在QImage上进行绘制时,不能使用QImage::Format_Indexed8这种格式。

请问这是什么意思?

回复
11 2016年1月20日 - 15:07

最后两段代码,只有灰白的对话框,没有显示椭圆,怎么回事?

回复
1 2016年1月20日 - 16:55

豆子你好:
第一段代码,我编译后只显示了一个对话框

回复
1 2016年1月20日 - 16:55

不好意思。是最后两段代码。

回复
wasai 2016年12月19日 - 16:26

想向您请教一个问题,我使用grabWidget()函数每10ms截一张图,widget是一个graphicsView,但是会出现花屏的问题,就是有时候会保存上一次view里某个item的移动痕迹,求救~

回复
xiongq 2017年4月8日 - 15:28

楼主你差点把我埋了。。。
要像你这么加载图片,图片得放在build-xxxx 目录下面。
但是osx就坑死人。放下面不行还是得加绝对路径

回复
豆子 2017年4月8日 - 23:17

使用路径加载,如果用 QtCreator 运行的话,是要从 QtCreator 里面设置的 working directory 开始查找的。至于为什么 mac 上面必须用绝对路径就不大清楚了,可能是因为 mac 的话是有 bundle 的

回复
Alien You 2017年5月11日 - 16:47

表示赞同,你这么一说,我把照片放在构建目录下还真是加载成功了,放在工作目录下不行,我郁闷了半天

回复
春云者 2021年7月11日 - 17:30

觉得将QPixmap等理解为绘图设备(画布)并不妥

回复

发表评论

关于我

devbean

devbean

豆子,生于山东,定居南京。毕业于山东大学软件工程专业。软件工程师,主要关注于 Qt、Angular 等界面技术。

主题 Salodad 由 PenciDesign 提供 | 静态文件存储由又拍云存储提供 | 苏ICP备13027999号-2