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

00. 目录

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