第15篇 2D绘图（五）绘制图片

导语

Qt提供了四个类来处理图像数据：QImage、QPixmap、QBitmap和QPicture，它们也都是常用的绘图设备。其中QImage主要用来进行I/O处理，它对I/O处理操作进行了优化，而且也可以用来直接访问和操作像素；QPixmap主要用来在屏幕上显示图像，它对在屏幕上显示图像进行了优化；QBitmap是QPixmap的子类，它是一个便捷类，用来处理颜色深度为1的图像，即只能显示黑白两种颜色；QPicture用来记录并重演QPainter命令。这一节我们只讲解QPixmap。

环境：Windows Xp + Qt 4.8.4+QtCreator 2.6.2

正文

一、简单绘制图片

1．这次我们重新创建一个Qt Gui应用，项目名称为painter_2，在类信息页面，将基类更改为QDialog，类名使用默认的Dialog即可。

2．然后在源码目录中复制一张图片，比如这里是一张背景透明的logo.png图片，如下图所示。

3．在dialog.h文件中添加重绘事件处理函数的声明：

protected:void paintEvent(QPaintEvent *);

4．到dialog.cpp文件中先添加头文件包含#include <QPainter>，然后添加函数的定义：

void Dialog::paintEvent(QPaintEvent *)
{QPainter painter(this);QPixmap pix;pix.load("../painter_2/logo.png");painter.drawPixmap(0, 0, 129, 66, pix);
}

这里使用了相对路径，因为Qt Creator默认是使用影子构建，即编译生成的文件在painter_2-build-desktop-Debug这样的目录里面，而这个目录就是当前目录，所以源码目录就是其上级目录了。大家可以根据自己的实际情况来更改路径，也可以使用绝对路径，不过最好使用资源文件来存放图片。drawPixmap()函数在给定的矩形中来绘制图片，这里矩形的左上角顶点为(0, 0)点，宽129，高66，如果这个跟图片的大小不相同，默认会拉伸图片。运行效果如下图所示。

（注意：下面的操作涉及到了坐标系统，这里不再详细讲解，大家先进行操作查看效果，具体的坐标内容将在下一节讲解。）

二、平移图片

QPainter类中的translate()函数实现坐标原点的改变，改变原点后，此点将会成为新的原点（0，0）。下面来看一个例子。

在paintEvent()函数里面继续添加如下代码：

painter.translate(100, 100); //将（100，100）设为坐标原点
painter.drawPixmap(0, 0, 129, 66, pix);

运行程序，效果如下图所示。

这里将（100，100）设置为了新的坐标原点，所以下面在（0，0）点贴图，就相当于在以前的（100，100）点贴图。

三、缩放图片

我们可以使用QPixmap类中的scaled()函数来实现图片的放大和缩小。

在paintEvent()函数中继续添加代码：

qreal width = pix.width(); //获得以前图片的宽和高
qreal height = pix.height();
//将图片的宽和高都扩大两倍，并且在给定的矩形内保持宽高的比值不变
pix = pix.scaled(width*2, height*2, Qt::KeepAspectRatio);
painter.drawPixmap(70, 70,pix);

其中参数Qt::KeepAspectRatio，是图片缩放的方式。我们可以查看其帮助。将鼠标指针放到该代码上，当出现F1提示时，按下F1键，这时就可以查看其帮助了。当然我们也可以直接在帮助里查找该关键字。如下图所示。

这里有三个值，只看其图片就可大致明白，Qt::IgnoreAspectRatio是不保持图片的宽高比，Qt::KeepAspectRatio是在给定的矩形中保持宽高比，最后一个也是保持宽高比，但可能超出给定的矩形。这里给定的矩形是由我们显示图片时给定的参数决定的，例如painter.drawPixmap(0,0,100,100,pix);就是在以（0，0）点为起始点的宽和高都是100的矩形中。

运行程序效果如下图所示。

四、旋转图片

旋转使用的是QPainter类的rotate()函数，它默认是以原点为中心进行旋转的。我们要改变旋转的中心，可以使用前面讲到的translate()函数完成。

在paintEvent()函数中继续添加如下代码：

painter.translate(64, 33); //让图片的中心作为旋转的中心
painter.rotate(90); //顺时针旋转90度
painter.translate(-64,-33); //使原点复原
painter.drawPixmap(100, 100, 129, 66, pix);

这里必须先改变旋转中心，然后再旋转，然后再将原点复原，才能达到想要的效果。运行程序，效果如图所示。

五、扭曲图片

实现图片的扭曲，是使用的QPainter类的shear(qreal sh，qreal sv)函数完成的。它有两个参数，前面的参数实现横行变形，后面的参数实现纵向变形。当它们的值为0时，表示不扭曲。

在paintEvent()中继续添加如下代码：

painter.shear(0.5, 0); //横向扭曲
painter.drawPixmap(100, 0, 129, 66, pix);

运行效果如下图所示。

结语

这一节中只讲解了QPixmap类的简单应用。对于后面讲到的图片变形的应用，细心的读者可能已经发现了，旋转了坐标系统以后再绘制图片都是纵向的，这就是因为旋转了坐标系统而没有进行恢复造成的。具体的坐标操作我们会在下一节讲解。

第15篇 2D绘图（五）绘制图片相关推荐

[Qt教程] 第15篇 2D绘图（五）绘制图片
[Qt教程] 第15篇 2D绘图(五)绘制图片楼主发表于 2013-5-2 17:59:00 | 查看: 886| 回复: 3 绘制图片版权声明该文章原创于Qter开源社区(www.qter ...
【Qt】2D绘图之绘制图片
00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 简单绘制图片 04. 平移图片 05. 缩放图片 06. 旋转图片 07. 扭曲图片 08. 附录 01. 概述 Qt提供 ...
[Qt教程] 第13篇 2D绘图（三）绘制文字
[Qt教程] 第13篇 2D绘图(三)绘制文字楼主发表于 2013-4-25 23:04:46 | 查看: 720| 回复: 0 绘制文字版权声明该文章原创于Qter开源社区,作者yafei ...
[Qt教程] 第11篇 2D绘图（一）绘制简单图形
[Qt教程] 第11篇 2D绘图(一)绘制简单图形楼主发表于 2013-4-23 12:52:35 | 查看: 1398| 回复: 5 绘制简单图形版权声明该文章原创于Qter开源社区,作者 ...
[Qt教程] 第14篇 2D绘图（四）绘制路径
[Qt教程] 第14篇 2D绘图(四)绘制路径楼主发表于 2013-4-27 12:40:52 | 查看: 611| 回复: 0 绘制路径版权声明该文章原创于Qter开源社区(www.qte ...
[Qt教程] 第20篇 2D绘图（十）图形视图框架（下）
[Qt教程] 第20篇 2D绘图(十)图形视图框架(下) 楼主发表于 2013-5-4 15:43:02 | 查看: 861| 回复: 0 图形视图框架(下) 版权声明该文章原创于Qter开源社 ...
[Qt教程] 第19篇 2D绘图（九）图形视图框架（上）
[Qt教程] 第19篇 2D绘图(九)图形视图框架(上) 楼主发表于 2013-5-4 15:26:20 | 查看: 1798| 回复: 26 图形视图框架(上) 版权声明导语在前面讲的基本绘 ...
【Qt】2D绘图之绘制图像(二)
00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 绘制QImage图像 04. 绘制QPixmap图像 05. 绘制QPicture图像 06. 综合对比 07. 附录 0 ...
【Qt】2D绘图之绘制简单的图形
00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 绘制图形 04. 画笔和画刷 05. 绘制弧线 06. 附录 01. 概述 Qt中提供了强大的2D绘图系统,可以使用同一A ...

第15篇 2D绘图（五）绘制图片

导语

目录

正文

结语

第15篇 2D绘图（五）绘制图片相关推荐

最新文章

热门文章