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

àì夳堔傛蜴生んèń 2023-07-17 06:07 85阅读 0赞

# 2D绘图 #

之前我们使用 QPainter 在 QWidget 上绘图, 那么其实 QPainter 还能在任何 QPaintDevice上绘制, 继承至QPaintDevice 还有QPixMap、QImage、QPicture,那么它们的区别是. 1、使用 QPixMap 进行绘图，根据硬件显示进行优化. 2、使用 QImage 进行绘图，独立与硬件，保存最原始的图片数据. 3、QPicture,可以记录和重现 QPainter 命令

将所有需要绘制的图形，先绘制在 QPixmap QImage QPicture 中， 绘制完成后，再到paintEvent 中一次性绘制出来，可以大大提高 painterEvent 事件处理器的处理效率，可以有效避免绘制过程出现卡顿。

## 1 在QPixmap上绘图 ##

先把所有的图形元素都画在 QPixmap 对象上面，然后再通过调用 update()， 去调度 paintEvent绘制出 QPixmap 对象的内容。QPixmap 对象可以使用save()，来保存成一个图片文件。

例如：

Widget.h

#ifndef WIDGET_H 
        #define WIDGET_H 
         
        #include <QWidget> 
        #include <QPixmap> 
        class Widget : public QWidget 
        { 
            Q_OBJECT 
         
        public: 
            Widget( QWidget * parent = 0); 
            ~Widget(); 
            void paintEvent ( QPaintEvent * ev ); 
        public slots: 
            void drawPixmap (); 
        private: 
            QPixmap * _pixmap; 
        }; 
         
        #endif // WIDGET_H

widget.cpp

#include "widget.h" 
        #include <QDebug> 
        #include <QPainter> 
        #include <QDialog> 
        #include <QHBoxLayout> 
        #include <QPushButton> 
         
        Widget::Widget( QWidget * parent) 
          : QWidget( parent) 
        { 
            this -> resize( 400, 400); 
            _pixmap = new QPixmap( this -> size()); 
            _pixmap -> fill( QColor( 0, 0, 0, 0)); //填充透明,默认是黑色 
         
        /*dialog for controlling*/ 
            QDialog * dialog = new QDialog( this); 
            QPushButton * button = new QPushButton( "drawPixmap", dialog); 
            QHBoxLayout * hBox = new QHBoxLayout( dialog); 
            connect( button, SIGNAL( clicked()), this, SLOT( drawPixmap())); 
            hBox -> addWidget( button); 
            dialog -> setLayout( hBox); 
            dialog -> show(); 
        } 
         
        void Widget::drawPixmap() 
        { 
            QPainter painter; 
            painter. begin( _pixmap); 
            painter. drawLine( 0, 0, 100, 100); 
            painter. drawRect( 100, 100, 100, 100); 
            painter. end(); 
            qDebug() << __FUNCTION__ << endl; 
            this -> update(); //画完之后调用update(); 
        } 
        void Widget::paintEvent( QPaintEvent * ev) 
        { 
            QPainter painter; 
            painter. begin( this); 
            painter. drawPixmap( 0, 0, * _pixmap); 
            painter. end(); 
         
        } 
        Widget::~Widget() 
        { 
            delete _pixmap; 
        }

需要注意的是QPixmap不继承自QObject无法使用内存托管机制，需要显示释放内存。

## 2 在QImage上绘图 ##

先把所有的图形元素都画在QImage对象上面，然后再通过调用update()，去调度paintEvent绘制出QImage对象的内容.。QImage对象可以使用save()，来保存成一个图片。

需要注意的是QImage的初始化方式与QPixmap的不同。

widget.h

#ifndef WIDGET_H 
        #define WIDGET_H 
         
        #include <QWidget> 
        #include <QImage> 
         
        class Widget : public QWidget 
        { 
            Q_OBJECT 
         
        public: 
            Widget( QWidget * parent = 0); 
            ~Widget(); 
            void paintEvent ( QPaintEvent * ev ); 
        public slots: 
            void drawImage (); 
        private: 
            QImage * _image; 
        }; 
         
        #endif // WIDGET_H

widget.cpp

#include "widget.h" 
        #include <QDebug> 
        #include <QPainter> 
        #include <QDialog> 
        #include <QHBoxLayout> 
        #include <QPushButton> 
         
        Widget::Widget( QWidget * parent) 
          : QWidget( parent) 
        { 
            this -> resize( 400, 400); 
            /*初始化的方式不同*/ 
            _image = new QImage( this -> size(), QImage::Format_ARGB32_Premultiplied); 
            _image -> fill( QColor( 0, 0, 0, 0)); //填充透明,默认是黑色 
         
         
        /* dialog controlling*/ 
            QDialog * dialog = new QDialog( this); 
            QPushButton * button = new QPushButton( "drawImage", dialog); 
            QHBoxLayout * hBox = new QHBoxLayout( dialog); 
            connect( button, SIGNAL( clicked()), this, SLOT( drawImage())); 
            hBox -> addWidget( button); 
            dialog -> setLayout( hBox); 
            dialog -> show(); 
        } 
         
        void Widget::drawImage() 
        { 
            QPainter painter; 
            painter. begin( _image); 
            painter. drawLine( 0, 0, 100, 100); 
            painter. drawRect( 100, 100, 100, 100); 
            painter. end(); 
            qDebug() << __FUNCTION__ << endl; 
            this -> update(); //画完之后调用update(); 
        } 
         
        void Widget::paintEvent( QPaintEvent * ev) 
        { 
            QPainter painter; 
            painter. begin( this); 
            painter. drawImage( 0, 0, * _image); 
            painter. end(); 
         
        } 
         
        Widget::~Widget() 
        { 
            delete _image; 
        }

## 3 在QPicture上绘图 ##

先把所有的图形元素都画在QPicture对象上面,然后再通过调用update()，去调度paintEvent绘制出QPicture对象的内容。QPicture对象可以使用save()，来保存成一个文件。与QImage QPixmap的不同之处在于，QPicture强调的画图的动作的记录, 然后保存的文件不是一张图片。

#include "widget.h" 
        #include <QDebug> 
        #include <QPainter> 
        #include <QDialog> 
        #include <QHBoxLayout> 
        #include <QPushButton> 
         
        Widget::Widget( QWidget * parent) 
          : QWidget( parent) 
        { 
            this -> resize( 400, 400); 
            _picture = new QPicture; 
         
         
        /*dialog for controlling*/ 
            QDialog * dialog = new QDialog( this); 
            QPushButton * button = new QPushButton( "drawPicture", dialog); 
            QHBoxLayout * hBox = new QHBoxLayout( dialog); 
            connect( button, SIGNAL( clicked()), this, SLOT( drawPicture())); 
            hBox -> addWidget( button); 
            dialog -> setLayout( hBox); 
            dialog -> show(); 
        } 
         
        void Widget::drawPicture() 
        { 
            qDebug() << __FUNCTION__ << endl; 
            QPainter painter; 
            painter. begin( _picture); 
            painter. drawLine( 0, 0, 100, 100); 
            painter. drawRect( 100, 100, 100, 100); 
            painter. end(); 
            this -> update(); //画完之后调用update(); 
        } 
         
        void Widget::paintEvent( QPaintEvent * ev) 
        { 
            QPainter painter; 
            painter. begin( this); 
            painter. drawPicture( 0, 0, * _picture); 
            painter. end(); 
         
        } 
         
        Widget::~Widget() 
        { 
            delete _picture; 
        }

## 4 绘制不规则窗体 ##

绘制不规则窗体的步骤如下：

1.  顶级窗口设置为无边框 setWindowFlags(Qt::FramelessWindowHint);
2.  顶级窗口设置为透明窗体 setAttribute(Qt::WA\_TranslucentBackground);
3.  重新实现paintEvent事件处理机制。绘制出一张图片出来。

发表评论取消回复

表情：

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

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

相关阅读

相关 Qt实现2D绘图

一、介绍 Qt中提供了强大的2D绘图系统，可以使用相同的API在屏幕和绘图设备上进行绘制，它主要基于`QPainter`、`QPaintDevice`和`QPaintEn

太过爱你忘了你带给我的痛/ 2024年04月08日 09:36/ 0 赞/ 184 阅读

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

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

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

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

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

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

相关【Qt】2D绘图之涂鸦板

00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 程序设计(基本功能)

Dear 丶/ 2022年11月12日 15:59/ 0 赞/ 276 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关【Qt】2D绘图之渐变填充

00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 线性渐变 04.

刺骨的言语ヽ痛彻心扉/ 2022年11月12日 09:45/ 0 赞/ 366 阅读

相关 QT 2D绘图

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

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