【Qt】2D绘图之绘制图片

00. 目录

文章目录

00. 目录
01. 概述
02. 开发环境
03. 简单绘制图片
04. 平移图片
05. 缩放图片
06. 旋转图片
07. 扭曲图片
08. 附录

01. 概述

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

02. 开发环境

Windows系统：Windows10

Qt版本：Qt5.15或者Qt6

03. 简单绘制图片

3.1 创建一个Qt Widgets应用，项目名称为11PixMap，在类信息页面，将基类选择为QWidget，类名使用默认的Widget即可。

3.2 项目所在的目录中添加一下几张图片

3.3 头文件中添加重绘事件处理函数的声明

protected:void paintEvent(QPaintEvent *);

3.4 源文件中先添加头文件包含#include ，然后添加函数的定义

void Widget::paintEvent(QPaintEvent *)
{QPainter painter(this);QPixmap pixmap;pixmap.load("../11Pixmap/image/a.png");painter.drawPixmap(0, 0, 128, 128, pixmap);}

drawPixmap()函数在给定的矩形中来绘制图片，这里矩形的左上角顶点为(0, 0)点，宽128，高128，如果宽高跟图片的大小比例不同，默认会拉伸图片。运行效果如下图所示。

04. 平移图片

QPainter类中的translate()函数实现坐标原点的改变，改变原点后，此点将会成为新的原点（0，0）。

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

void Widget::paintEvent(QPaintEvent *)
{QPainter painter(this);QPixmap pixmap;pixmap.load("../11Pixmap/image/a.png");painter.drawPixmap(0, 0, 128, 128, pixmap);painter.translate(150, 150);painter.drawPixmap(0, 0, 128, 128, pixmap);}

这里将（150，150）设置为了新的坐标原点，所以下面在（0，0）点贴图，就相当于在以前的（150，150）点贴图。执行结果如下：

05. 缩放图片

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

这里有三个值，只看其示例图片就可大致明白，Qt::IgnoreAspectRatio是不保持图片的宽高比；Qt::KeepAspectRatio是在给定的矩形中保持宽高比；最后一个也是保持宽高比，但可能超出给定的矩形。这里给定的矩形是由我们显示图片时给定的参数决定的

程序示例


void Widget::paintEvent(QPaintEvent *)
{QPainter painter(this);QPixmap pixmap;pixmap.load("../11Pixmap/image/a.png");painter.drawPixmap(0, 0, 128, 128, pixmap);painter.translate(150, 150);painter.drawPixmap(0, 0, 128, 128, pixmap);qreal width = pixmap.width();qreal height = pixmap.height();//将图片的宽和高都缩小 并且在给定的矩形内保持宽高的比值不变。pixmap = pixmap.scaled(width * 0.2, height * 0.2, Qt::KeepAspectRatio);painter.translate(150, 150);painter.drawPixmap(0, 0, pixmap);
}

执行结果

06. 旋转图片

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

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

void Widget::paintEvent(QPaintEvent *)
{QPainter painter(this);QPixmap pixmap;pixmap.load("../11Pixmap/image/a.png");painter.drawPixmap(0, 0, 128, 128, pixmap);painter.translate(150, 150);//顺时针旋转90°painter.rotate(90);//恢复原点painter.translate(-150, -150);painter.drawPixmap(150, 150, 128, 128, pixmap);
}

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

07. 扭曲图片

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

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

void Widget::paintEvent(QPaintEvent *)
{QPainter painter(this);QPixmap pixmap;pixmap.load("../11Pixmap/image/a.png");painter.drawPixmap(0, 0, 128, 128, pixmap);//横向扭曲painter.shear(0.5, 0);painter.drawPixmap(150, 150, 128, 128, pixmap);
}

执行结果如下：

08. 附录

源码下载：【Qt】2D绘图之绘制图片.rar