【Qt】2D绘图之绘制图像(二)

00. 目录

文章目录

00. 目录
01. 概述
02. 开发环境
03. 绘制QImage图像
04. 绘制QPixmap图像
05. 绘制QPicture图像
06. 综合对比
07. 附录

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. 绘制QImage图像

QImage类提供了一个与硬件无关的图像表示方法，可以直接访问像素数据，也可以作为绘图设备。

因为QImage是QPaintDevice的子类，所以QPainter可以直接在QImage对象上进行绘制。当在QImage上使用QPainter时，绘制操作会在当前GUI线程以外的其他线程中执行。

QImage支持的图像格式包含了单色、8位、32位和alpha混合格式图像。QImage提供了获取图像各种信息的相关函数，还提供了一些转换图像的函数。

QImage使用了隐式数据共享，所以可以进行值传递，QImage对象还可以使用数据流或者进行比较。

Qt支持的图像格式

程序示例

void Widget::paintEvent(QPaintEvent *)
{QPainter painter(this);QImage image;//加载一张图片image.load(":/image/a.png");//输出图片相关信息qDebug() << image.size() << " " << image.format() << " " << image.depth();//在界面上绘制图片painter.drawImage(QPoint(10, 10), image);//获取镜像图片QImage mirror = image.mirrored();//将图片进行扭曲QTransform transform;transform.shear(0.2, 0);QImage image2 = mirror.transformed(transform);painter.drawImage(QPoint(10, 160), image2);//将图片保存到当前文件中image2.save("./mirror.png");
}

运行结果

04. 绘制QPixmap图像

QPixmap可以作为一个绘图设备将图像显示在屏幕上。QPixmap中的像素在内部由底层的窗口系统来进行管理。因为QPixmap是QPaintDevice的子类，所以QPainter也可以直接在它上面进行绘制。要想访问像素，只能使用QPainter的相应函数，或者将QPixmap转换为QImage。而与QImage不同，QPixmap中的fill()函数可以使用指定的颜色初始化整个pixmap图像。

可以使用toImage()和fromImage()函数在QImage和QPixmap之间进行转换。通常情况下，QImage类用来加载一个图像文件，随意操纵图像数据，然后将QImage对象转换为QPixmap类型再显示到屏幕上。当然，如果不需要对图像进行操作，那么也可以直接使用QPixmap来加载图像文件。与QImage不同，QPixmap依赖于具体的硬件。QPixmap类也是使用隐式数据共享，可以作为值进行传递。

QPixmap可以很容易的使用QLabel或QAbstractButton的子类（比如QPushButton）来显示在屏幕上。QLabel拥有一个pixmap属性，而QAbstractButton拥有一个icon属性。我们还可以使用grabWidget()和grabWindow()等静态函数来实现截屏功能，使用mask()等函数实现遮罩效果。

程序示例

void Widget::paintEvent(QPaintEvent *)
{QPainter painter(this);QPixmap pix;pix.load(":/image/b.png");painter.drawPixmap(0, 0, pix.width(), pix.height(), pix);painter.setBrush(QColor(255, 255, 255, 100));painter.drawRect(0, 0, pix.width(), pix.height());painter.drawPixmap(100, 0, pix.width(), pix.height(), pix);painter.setBrush(QColor(0, 0, 255, 100));painter.drawRect(100, 0, pix.width(), pix.height());}

运行结果

05. 绘制QPicture图像

QPicture是一个可以记录和重演QPainter命令的绘图设备。QPicture可以使用一个平台无关的格式（.pic格式）将绘图命令序列化到IO设备中，所有可以绘制在QWidget部件或者QPixmap上的内容，都可以保存在QPicture中。QPicture与分辨率无关，在不同设备上的显示效果都是一样的。要记录QPainter命令，可以像如下代码这样进行：

void Widget::paintEvent(QPaintEvent *)
{QPicture picture;QPainter painter;//记录Qpainter命令painter.begin(&picture);painter.drawEllipse(10, 20, 80, 70);painter.end();picture.save("draw.pic");//重演QPainter命令picture.load("draw.pic");painter.begin(this);painter.drawPicture(0, 0, picture);painter.end();}

运行结果

06. 综合对比

程序示例

void Widget::paintEvent(QPaintEvent *)
{QPainter painter(this);//绘制imageQImage  image(100, 100, QImage::Format_ARGB32);painter.begin(&image);painter.setPen(QPen(Qt::green, 3));painter.setBrush(Qt::yellow);painter.drawRect(10, 10, 60, 60);painter.drawText(10, 10, 60, 60, Qt::AlignCenter, tr("Image"));painter.setBrush(QColor(0, 0, 0, 100));painter.drawRect(50, 50, 40, 40);painter.end();//绘制pixmapQPixmap pixMap(100, 100);painter.begin(&pixMap);painter.setPen(QPen(Qt::green, 3));painter.setBrush(Qt::yellow);painter.drawRect(10, 10, 60, 60);painter.drawText(10, 10, 60, 60, Qt::AlignCenter, tr("Pixmap"));painter.setBrush(QColor(0, 0, 0, 100));painter.drawRect(50, 50, 40, 40);painter.end();//绘制bitmapQBitmap bitMap(100, 100);painter.begin(&bitMap);painter.setPen(QPen(Qt::green, 3));painter.setBrush(Qt::yellow);painter.drawRect(10, 10, 60, 60);painter.drawText(10, 10, 60, 60, Qt::AlignCenter, tr("bitMap"));painter.setBrush(QColor(0, 0, 0, 100));painter.drawRect(50, 50, 40, 40);painter.end();//绘制PicutureQPicture picture;painter.begin(&picture);painter.setPen(QPen(Qt::green, 3));painter.setBrush(Qt::yellow);painter.drawRect(10, 10, 60, 60);painter.drawText(10, 10, 60, 60, Qt::AlignCenter, tr("QPicture"));painter.setBrush(QColor(0, 0, 0, 100));painter.drawRect(50, 50, 40, 40);painter.end();painter.begin(this);painter.drawImage(50, 20, image);painter.drawPixmap(200, 20, pixMap);painter.drawPixmap(50, 170, bitMap);painter.drawPicture(200, 170, picture);painter.end();
}

运行结果

07. 附录

源码下载：【Qt】2D绘图之绘制图像(二).rar