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

╰半夏微凉° 2022-11-12 13:46 215阅读 0赞

## 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支持的图像格式**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70]

程序示例

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

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

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

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

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

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

## 06. 综合对比 ##

程序示例

void Widget::paintEvent(QPaintEvent *)
    { 
        QPainter painter(this);
    
        //绘制image
        QImage  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();
    
        //绘制pixmap
        QPixmap 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();
    
        //绘制bitmap
        QBitmap 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();
    
        //绘制Picuture
        QPicture 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();
    }

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

## 07. 附录 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70]: /images/20221022/e2961d93be5946c390dc3fdf9fd1dd4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 1]: /images/20221022/7d179a4531fc49e7bdd2ed6d2c7e8118.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 2]: /images/20221022/e6c394fe82634a62a0ef85f4b327b7ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 3]: /images/20221022/e2df4c8f22d045b1b679d33d0692297e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 4]: /images/20221022/693200984f2a4564bdaba181ca5d5da6.png
[Qt_2D_.rar]: https://download.csdn.net/download/dengjin20104042056/16083990

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 Qt深入浅出（十二）2D绘图

2D绘图之前我们使用 QPainter 在 QWidget 上绘图, 那么其实 QPainter 还能在任何 QPaintDevice上绘制, 继承至QPaintD

àì夳堔傛蜴生んèń/ 2023年07月17日 06:07/ 0 赞/ 17 阅读

相关【Qt】2D绘图之双缓冲绘图

00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 绘制矩形 04.

青旅半醒/ 2022年11月13日 00:48/ 0 赞/ 258 阅读

相关【Qt】2D绘图之绘图中其它问题

00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 重绘事件 04.

怼烎@/ 2022年11月12日 14:57/ 0 赞/ 225 阅读

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

00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 绘制QImage图像

╰半夏微凉°/ 2022年11月12日 13:46/ 0 赞/ 216 阅读

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

00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 简单绘制图片 04

- 日理万妓/ 2022年11月12日 10:58/ 0 赞/ 247 阅读

相关【Qt】2D绘图之填充规则

00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 程序示例 04.

小咪咪/ 2022年11月12日 10:54/ 0 赞/ 286 阅读

相关【Qt】2D绘图之绘制路径

00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 绘制简单路径 04

男娘i/ 2022年11月12日 10:52/ 0 赞/ 369 阅读

相关【Qt】2D绘图之绘制文字

00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 基本绘制 04.

╰半夏微凉°/ 2022年11月12日 10:00/ 0 赞/ 227 阅读

相关【Qt】2D绘图之绘制简单的图形

00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 绘制图形 04.

拼搏现实的明天。/ 2022年11月12日 09:40/ 0 赞/ 237 阅读

相关 QT 2D绘图

文章目录基础知识基本绘制和填充绘制文字代码效果绘制路径代码效果绘制图像

缺乏、安全感/ 2022年03月26日 07:41/ 0 赞/ 344 阅读