绘图设备是指继承QPainterDevice的子类。Qt一共提供了四个这样的类,分别是QPixmap、QBitmap、QImage和QPicture。其中,QPixmap专门为图像在屏幕上的显示做了优化,而QBitmap是QPixmap的一个子类,它的色深限定为1,你可以使用QPixmap的isQBitmap()函数来确定这个QPixmap是不是一个QBitmap。QImage专门为图像的像素级访问做了优化。QPicture则可以记录和重现QPainter的各条命令。下面我们将分两部分介绍这四种绘图设备。
QPixmap继承了QPaintDevice,因此,你可以使用QPainter直接在上面绘制图形。QPixmap也可以接受一个字符串作为一个文件的路径来显示这个文件,比如你想在程序之中打开png、jpeg之类的文件,就可以使用QPixmap。使用QPainter的drawPixmap()函数可以把这个文件绘制到一个QLabel、QPushButton或者其他的设备上面。QPixmap是针对屏幕进行特殊优化的,因此,它与实际的底层显示设备息息相关。注意,这里说的显示设备并不是硬件,而是操作系统提供的原生的绘图引擎。所以,在不同的操作系统平台下,QPixmap的显示可能会有所差别。
QPixmap提供了静态的grabWidget()和grabWindow()函数,用于将自身图像绘制到目标上。同时,在使用QPixmap时,你可以直接使用传值也不需要传指针,因为QPixmap提供了“隐式数据共享”。关于这一点,我们会在以后的章节中详细描述,这里只要知道传递QPixmap不必须使用指针就好了。
QBitmap继承自QPixmap,因此具有QPixmap的所有特性。QBitmap的色深始终为1. 色深这个概念来自计算机图形学,是指用于表现颜色的二进制的位数。我们知道,计算机里面的数据都是使用二进制表示的。为了表示一种颜色,我们也会使用二进制。比如我们要表示8种颜色,需要用3个二进制位,这时我们就说色深是3. 因此,所谓色深为1,也就是使用1个二进制位表示颜色。1个位只有两种状态:0和1,因此它所表示的颜色就有两种,黑和白。所以说,QBitmap实际上是只有黑白两色的图像数据。
由于QBitmap色深小,因此只占用很少的存储空间,所以适合做光标文件和笔刷。
下面我们来看同一个图像文件在QPixmap和QBitmap下的不同表现:
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
先来看一下运行结果:
![](http://hi.csdn.net/attachment/201008/19/0_1282227229Wf4U.gif)
这里我们给出了两张png图片。Cat.png是没有透明色的纯白背景,而Cat2.png是具有透明色的背景。我们分别使用QPixmap和QBitmap来加载它们。注意看它们的区别:白色的背景在Qbitmap中消失了,而透明色在QBitmap中转换成了黑色;其他颜色则是使用点的疏密程度来体现的。
QPixmap使用底层平台的绘制系统进行绘制,无法提供像素级别的操作,而QImage则是使用独立于硬件的绘制系统,实际上是自己绘制自己,因此提供了像素级别的操作,并且能够在不同系统之上提供一个一致的显示形式。
![](http://hi.csdn.net/attachment/201008/19/0_1282227257tFfe.gif)
如上图所示(出自Qt API文档),我们声明了一个QImage对象,大小是3 x 3,颜色模式是RGB32,即使用32位数值表示一个颜色的RGB值,也就是说每种颜色使用8位。然后我们对每个像素进行颜色赋值,从而构成了这个图像。你可以把QImage想象成一个RGB颜色的二维数组,记录了每一像素的颜色。
最后一个需要说明的是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()命令终止。代码示例如下:
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
如果我们要重现命令,首先要使用QPicture::load()函数进行装载:
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
![](http://blog.51cto.com/images/editer/InBlock.gif)
Graphics View Framework
现在我们就要来看看在绘图部分功能最强大的Graphics View。我们经常说KDE桌面,新版本的KDE桌面就是建立在Graphics View的基础之上,可见其强大之处。
#include <QtGui>
class DrawApp : public QWidget {
public:
DrawApp();
protected:
void paintEvent(QPaintEvent *event);
};
DrawApp::DrawApp()
{
}
void DrawApp::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
painter.drawLine(10, 10, 150, 300);
}
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QGraphicsScene *scene = new QGraphicsScene;
scene->addLine(10, 10, 150, 300);
QGraphicsView *view = new QGraphicsView(scene);
view->resize(500, 500);
view->setWindowTitle("Graphics View");
view->show();
DrawApp *da = new DrawApp;
da->resize(500, 500);
da->setWindowTitle("QWidget");
da->show();
return a.exec();
}
Qt的白皮书里面这样写道:“Qt Graphics View 提供了用于管理和交互大量定制的 2D 图形对象的平面以及可视化显示对象的视图 widget,并支持缩放和旋转功能。Graphics View 使用 BSP(二进制空间划分)树形可非常快速地找到对象,因此即使是包含百万个对象的大型场景,也能实时图形化显示。”
Graphics View是一个基于item的M-V架构的框架。
基于item意思是,它的每一个组件都是一个item。这是与QPainter的状态机不同。回忆一下,使用QPainter绘图多是采用一种面向过程的描述方式,首先使用drawLine()画一条直线,然后使用drawPolygon()画一个多边形;而对于Graphics View来说,相同的过程可以是,首先创建一个场景scene,然后创建一个line对象和一个polygon对象,再使用scene的add()函数将line和polygon添加到scene,最后通过视口view就可以看到了。乍看起来,后者似乎更加复杂,但是,如果你的图像中包含了成千上万的直线、多边形之类,管理这些对象要比管理QPainter的draw语句容易得多。并且,这些图形对象也更加符合面向对象的设计要求:一个很复杂的图形可以很方便的复用。
M-V架构的意思是,Graphics View提供一个model和一个view。所谓model就是我们添加的种种对象,所谓view就是我们观察这些对象的视口。同一个model可以由很多view从不同的角度进行观察,这是很常见的需求。使用QPainter就很难实现这一点,这需要很复杂的计算,而Qt的Graphics View就可以很容易的实现。
Graphics View提供了一个QGraphicsScene作为场景,即是我们添加图形的空间,相当于整个世界;一个QGraphicsView作为视口,也就是我们观察的窗口,相当于照相机的取景框,这个取景框可以覆盖整个场景,也可以是场景的一部分;一些QGraphicsItem作为图形元件,以便scene添加,Qt内置了很多图形,比如line、polygon等,都是继承自QGraphicsItem。
下面我们来看一下代码:
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78e1e3a115342bc8b092d7d92afd6281.png)
为了突出重点,我们就直接include了QtGui,不过在实际应用中不建议这么做。这里提供了直线的两种实现:一个是DrawApp使用我们前面介绍的技术,重写paintEvent()函数,这里就不在赘述,重点来看main()函数里面的实现。
首先,我们创建了一个QGraphicsScene作为场景,然后在scene中添加了一个直线,这样就把我们需要的图形元件放到了scene中。然后创建一个QGraphicsView对象进行观察。就这样,我们就是用Graphics View搭建了一个最简单的应用。运行这个程序来看结果:
![](http://hi.csdn.net/attachment/201008/19/0_1282227366B3cj.gif)
![](http://hi.csdn.net/attachment/201008/19/0_1282227393W79k.gif)
第一张图是Graphics View的,第二个是DrawApp的。虽然这两个直线是同样的坐标,但是,DrawApp按照原始坐标绘制出了直线,而Graphics View则按照坐标绘制出直线之后,自动将直线居中显示在view视口。你可以通过拖动Graphics View来看直线是一直居中显示的。
这里仅仅是一个很简单的对比,不过你已经可以看到Graphics View功能的强大。仅这一个居中的操作,如果你是用QPainter,就需要很大的计算量了!当然,如果你不需要这种居中,Gra
phics View也是可以像QPainter绘制的一样进行显示的。