[Qt教程] 第15篇 2D绘图(五)绘制图片

[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) 


时间: 2024-11-02 07:47:23

[Qt教程] 第15篇 2D绘图(五)绘制图片的相关文章

[Qt教程] 第19篇 2D绘图(九)图形视图框架(上)

[Qt教程] 第19篇 2D绘图(九)图形视图框架(上) 楼主  发表于 2013-5-4 15:26:20 | 查看: 1798| 回复: 26 图形视图框架(上) 版权声明 导语 在前面讲的基本绘图中,我们可以自己绘制各种图形,并且控制它们.但是,如果需要同时绘制很多个相同或不同的图形,并且要控制它们的移动,检测它们的碰撞和叠加:或者我们想让自己绘制的图形可以拖动位置,进行缩放和旋转等操作.实现这些功能,要是还使用以前的方法,那么会十分困难.解决这些问题,可以使用Qt提供的图形视图框架.  

[Qt教程] 第20篇 2D绘图(十)图形视图框架(下)

[Qt教程] 第20篇 2D绘图(十)图形视图框架(下) 楼主  发表于 2013-5-4 15:43:02 | 查看: 861| 回复: 0 图形视图框架(下) 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 环境:Windows Xp + Qt 4.8.4+QtCreator 2.6.2 目录 三.场景(QGraphicsScene) (一)场景层 (二)索引算法 (三)边界矩形 (四)图形项查找 (五)事件处理和传播 (

[Qt教程] 第13篇 2D绘图(三)绘制文字

[Qt教程] 第13篇 2D绘图(三)绘制文字 楼主  发表于 2013-4-25 23:04:46 | 查看: 720| 回复: 0 绘制文字 版权声明 该文章原创于Qter开源社区,作者yafeilinux,转载请注明出处! 导语 Qt中除了绘制图形以外,还可以使用QPainter::darwText()函数来绘制文字,也可以使用QPainter::setFont()设置文字所使用的字体,使用QPainter::fontInfo()函数可以获取字体的信息,它返回QFontInfo类对象.在绘

[Qt教程] 第17篇 2D绘图(七)涂鸦板

[Qt教程] 第17篇 2D绘图(七)涂鸦板 楼主  发表于 2013-5-2 21:37:41 | 查看: 1255| 回复: 16 涂鸦板 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语        通过前面几节的学习,大家应该已经对Qt中2D绘图有了一定的认识,这一节我们将应用前面讲到的内容,编写一个简单的涂鸦板程序,这一节只是实现最基本的鼠标画线功能. 环境:Windows Xp + Qt 4.8.4+QtCreat

[Qt教程] 第12篇 2D绘图(二)渐变填充

[Qt教程] 第12篇 2D绘图(二)渐变填充 楼主  发表于 2013-4-23 17:59:31 | 查看: 689| 回复: 1 渐变填充 版权声明 该文章原创于Qter开源社区,作者yafeilinux,转载请注明出处! 导语 在前一节提到了在画刷中可以使用渐变填充.QGradient类就是用来和QBrush一起指定渐变填充的.Qt现在支持三种类型的渐变填充: 线性渐变(linear gradient)在开始点和结束点之间插入颜色: 辐射渐变(radial gradient)在焦点和环绕

[Qt教程] 第11篇 2D绘图(一)绘制简单图形

[Qt教程] 第11篇 2D绘图(一)绘制简单图形 楼主  发表于 2013-4-23 12:52:35 | 查看: 1398| 回复: 5 绘制简单图形 版权声明 该文章原创于Qter开源社区,作者yafeilinux,转载请注明出处! 导语 Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕和绘图设备上进行绘制,它主要基于QPainter.QPaintDevice和QPaintEngine这三个类.其中QPainter用来执行绘图操作:QPaintDevice提供绘图设备,它是一个二

[Qt教程] 第18篇 2D绘图(八)双缓冲绘图

[Qt教程] 第18篇 2D绘图(八)双缓冲绘图 楼主  发表于 2013-5-2 22:07:23 | 查看: 789| 回复: 1 双缓冲绘图 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 在前面一节中,讲述了如何实现简单的涂鸦板,这一次我们将实现在涂鸦板上绘制图形,这里以矩形为例进行讲解.在后面还会提出双缓冲绘图的概念. 环境:Windows Xp + Qt 4.8.4+QtCreator 2.6.2 目录 一.绘制矩

[Qt教程] 第16篇 2D绘图(六)坐标系统

[Qt教程] 第16篇 2D绘图(六)坐标系统 楼主  发表于 2013-5-2 20:08:12 | 查看: 738| 回复: 0 坐标系统 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 前面一节我们讲解了图片的显示,其中很多地方都用到了坐标的变化.这一节我们将讲解Qt的坐标系统,分为两部分来讲解:第一部分主要讲解前面一节的那几个函数,它们分别是translate()平移变换.scale()比例变换.rotate()旋转变

[Qt教程] 第45篇 进阶(五)Qt样式表

[Qt教程] 第45篇 进阶(五)Qt样式表 楼主  发表于 2013-9-13 15:43:55 | 查看: 329| 回复: 1 Qt样式表 版权声明 该文章原创于Qter开源社区 导语 一个完善的应用程序不仅应该有实用的功能,还要有一个漂亮的外观,这样才能使应用程序更加友善,更加吸引用户.作为一个跨平台的UI开发框架,Qt提供了强大而灵活的界面外观设计机制. Qt样式表是一个可以自定义部件外观的十分强大的机制.Qt样式表的概念.术语和语法都受到了HTML的层叠样式表(Cascading S