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

- 日理万妓 2022-11-12 10:58 239阅读 0赞

## 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 项目所在的目录中添加一下几张图片  
![在这里插入图片描述][20210323221812818.png]

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

protected:
        void paintEvent(QPaintEvent *);

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

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

## 04. 平移图片 ##

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

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

这里将（150，150）设置为了新的坐标原点，所以下面在（0，0）点贴图，就相当于在以前的（150，150）点贴图。执行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 1]

## 05. 缩放图片 ##

我们可以使用QPixmap类中的scaled()函数来实现图片的放大和缩小。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 2]

这里有三个值，只看其示例图片就可大致明白，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);
    }

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 3]

## 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);
    }

必须先改变旋转中心，然后再旋转，然后再将原点复原，才能达到想要的效果。运行程序，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 4]

## 07. 扭曲图片 ##

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

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

执行结果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 5]

## 08. 附录 ##

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

[20210323221812818.png]: /images/20221022/a8c828c3933b47fdb86132a094a8d309.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70]: /images/20221022/2813277b462242d580f3eddbfbeae629.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 1]: /images/20221022/ab05024f7d9e4275ba38b8792d1b2ea4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 2]: /images/20221022/cde605100eef456e81bff06b29fdb1eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 3]: /images/20221022/54d6216c58a74d5296587952ed7da391.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 4]: /images/20221022/821fa2608e2143e3ac434d9f2365fc7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 5]: /images/20221022/19379e941f9849b9b90fb4c8d4b2c1e2.png
[Qt_2D_.rar]: https://download.csdn.net/download/dengjin20104042056/16072287