[Qt教程] 第15篇 2D绘图（五）绘制图片

楼主

发表于 2013-5-2 17:59:00 | 查看: 886| 回复: 3

绘制图片

该文章原创于Qter开源社区（www.qter.org），作者yafeilinux，转载请注明出处！

导语

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

如果大家还想系统的学习其他绘图类的应用，可以参考《Qt Creator快速入门》第10章的相关内容。

涉及到的源码：

painter_2.zip (6.91 KB, 下载次数: 20)

[Qt教程] 第15篇 2D绘图（五）绘制图片相关推荐

[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教程] 第13篇 2D绘图（三）绘制文字
[Qt教程] 第13篇 2D绘图(三)绘制文字楼主发表于 2013-4-25 23:04:46 | 查看: 720| 回复: 0 绘制文字版权声明该文章原创于Qter开源社区,作者yafei ...
[Qt教程] 第18篇 2D绘图（八）双缓冲绘图
[Qt教程] 第18篇 2D绘图(八)双缓冲绘图楼主发表于 2013-5-2 22:07:23 | 查看: 789| 回复: 1 双缓冲绘图版权声明该文章原创于Qter开源社区(www.qt ...
[Qt教程] 第17篇 2D绘图（七）涂鸦板
[Qt教程] 第17篇 2D绘图(七)涂鸦板楼主发表于 2013-5-2 21:37:41 | 查看: 1255| 回复: 16 涂鸦板版权声明该文章原创于Qter开源社区(www.qter ...
[Qt教程] 第16篇 2D绘图（六）坐标系统
[Qt教程] 第16篇 2D绘图(六)坐标系统楼主发表于 2013-5-2 20:08:12 | 查看: 738| 回复: 0 坐标系统版权声明该文章原创于Qter开源社区(www.qter ...
[Qt教程] 第14篇 2D绘图（四）绘制路径
[Qt教程] 第14篇 2D绘图(四)绘制路径楼主发表于 2013-4-27 12:40:52 | 查看: 611| 回复: 0 绘制路径版权声明该文章原创于Qter开源社区(www.qte ...
[Qt教程] 第12篇 2D绘图（二）渐变填充
[Qt教程] 第12篇 2D绘图(二)渐变填充楼主发表于 2013-4-23 17:59:31 | 查看: 689| 回复: 1 渐变填充版权声明该文章原创于Qter开源社区,作者yafei ...
[Qt教程] 第11篇 2D绘图（一）绘制简单图形
[Qt教程] 第11篇 2D绘图(一)绘制简单图形楼主发表于 2013-4-23 12:52:35 | 查看: 1398| 回复: 5 绘制简单图形版权声明该文章原创于Qter开源社区,作者 ...

[Qt教程] 第15篇 2D绘图（五）绘制图片

[Qt教程] 第15篇 2D绘图（五）绘制图片

[Qt教程] 第15篇 2D绘图（五）绘制图片相关推荐

最新文章

热门文章