1 简介
参考视频: https://www.bilibili.com/video/BV1XW411x7NU?p=37
参考文档:《Qt 教程. docx》
本文简单介绍 Qt 的绘图与绘图设备.
Qt 的绘图系统基于三个类: QPainter,QPainterDevice 和 QPaintEngine. 它们之间的层次关系结构如下:
QPainter: 用于执行绘图的操作, 可以把它想象成画家;
QPaintDevice: 一个二维空间的抽象, 这个二维空间允许 QPainter 在其上进行绘制. 想象成画板;
QPaintEngine: 提供了画笔 (QPainter) 在不同的设备上进行绘制的统一的接口. 对开发人员透明.
我们可以把 QPainter 理解成画笔; 把 QPaintDevice 理解成使用画笔的地方, 比如纸张, 屏幕等; 而对于纸张, 屏幕而言, 肯定要使用不同的画笔绘制, 为了统一使用一种画笔, 我们设计了 QPaintEngine 类, 这个类让不同的纸张, 屏幕都能使用一种画笔.
Qt 的绘图系统实际上是, 使用 QPainter 在 QPainterDevice 上进行绘制, 它们之间使用 QPaintEngine 进行通讯(也就是翻译 QPainter 的指令).
2 测试
下面写个测试代码来进行说明.
功能: 在窗口上绘制直线, 矩形, 椭圆, 添加背景图等.
(1)创建一个带 ui 的 QWidget 工程
(2)实现过程
我们只需要重写绘图事件处理函数就可以了, 也就是 void paintEvent(QPaintEvent *event);
如果在窗口绘图, 必须放在绘图事件里实现 ; 窗口需要重绘的时候 (状态改变) 绘图事件内部自动调用.
(3)实现效果
最终实现的效果如下:
(4)步骤说明
1)首先, 我们需要创建一个绘图对象, 并指定绘图设备(也就是准备画家和画板). 有两种方式:
方式一: QPainter p(this); // 创建画家, 并指定当前窗口为绘图设备.
方式二:
- QPainter p; // 创建画家对象
- p.begin(this); // 指定当前窗口为绘图设备
- // 绘图操作
- //p.drawxxxx();
- p.end();
我们这里使用方式二.
2)上图中的线宽以及颜色, 我们是使用画笔 QPen 实现的; 上图中矩形和椭圆形中的填充色, 我们是使用画刷 QBrush 实现的.
我们创建了画笔对象和画刷对象之后, 需要把它们交给画家, 也就是 QPainter.
- // 定义画笔
- QPen pen;
- pen.setWidth(2); // 设置线宽 5pix
- //pen.setColor(Qt::red); // 设置颜色
- pen.setColor(QColor(14, 9, 234)); //rgb 设置颜色
- pen.setStyle(Qt::DashLine); // 设置风格
- // 把画笔交给画家
- p.setPen(pen);
- // 创建画刷对象
- QBrush brush;
- brush.setColor(Qt::red); // 设置颜色
- brush.setStyle(Qt::Dense1Pattern); // 设置样式
- // 把画刷交给画家
- p.setBrush(brush);
3)绘制背景图
使用 drawPixmap 函数, 有好几种方式, 这里说两种:
- // p.drawPixmap(0, 0, width(), height(), QPixmap(":/new/prefix1/image/superman.jpg"));
- p.drawPixmap(rect(), QPixmap(":/new/prefix1/image/background.png")); // 获取矩形
4)绘制直线
上图中的第一个正方形是用直线拼出来的, 绘制直线使用 drawLine()函数.
- // 画直线
- p.drawLine(20, 20, 100, 20);
- p.drawLine(20, 20, 20, 100);
- p.drawLine(20, 100, 100, 100);
- p.drawLine(100, 20, 100, 100);
5)绘制矩形
- // 画矩形
- p.drawRect(120, 20, 100, 50);
6)绘制椭圆
- // 画圆
- p.drawEllipse(QPoint(170, 150), 50, 25);
5)绘制笑脸
上图中显示点击按钮并让笑脸移动是使用 update()函数实现的, 当我们点击按钮时, 就在按钮的槽函数中调用 update()进行更新窗口.
- // 画笑脸
- p.drawPixmap(x, 180, 80, 80, QPixmap(":/new/prefix1/image/face.png"));
下面给出 widget.cpp 的完整代码:
- #include "widget.h"
- #include "ui_widget.h"
- #include <QPainter>
- #include <QPen>
- #include <QBrush>
- Widget::Widget(QWidget *parent) :
- QWidget(parent),
- ui(new Ui::Widget)
- {
- ui->setupUi(this);
- x = 0;
- }
- Widget::~Widget()
- {
- delete ui;
- }
- void Widget::paintEvent(QPaintEvent *event)
- {
- // 方式一:
- // QPainter p(this);
- // 方式二:
- QPainter p; // 创建画家对象
- p.begin(this); // 指定当前窗口为绘图设备
- // 绘图操作
- //p.drawxxxx();
- // 画背景图
- // p.drawPixmap(0, 0, width(), height(), QPixmap(":/new/prefix1/image/superman.jpg"));
- p.drawPixmap(rect(), QPixmap(":/new/prefix1/image/background.png")); // 获取矩形
- // 定义画笔
- QPen pen;
- pen.setWidth(2); // 设置线宽 5pix
- //pen.setColor(Qt::red); // 设置颜色
- pen.setColor(QColor(14, 9, 234)); //rgb 设置颜色
- pen.setStyle(Qt::DashLine); // 设置风格
- // 把画笔交给画家
- p.setPen(pen);
- // 创建画刷对象
- QBrush brush;
- brush.setColor(Qt::red); // 设置颜色
- brush.setStyle(Qt::Dense1Pattern); // 设置样式
- // 把画刷交给画家
- p.setBrush(brush);
- // 画直线
- p.drawLine(20, 20, 100, 20);
- p.drawLine(20, 20, 20, 100);
- p.drawLine(20, 100, 100, 100);
- p.drawLine(100, 20, 100, 100);
- // 画矩形
- p.drawRect(120, 20, 100, 50);
- // 画圆
- p.drawEllipse(QPoint(170, 150), 50, 25);
- // 画笑脸
- p.drawPixmap(x, 180, 80, 80, QPixmap(":/new/prefix1/image/face.png"));
- p.end();
- }
- void Widget::on_pushButton_clicked()
- {
- x += 20;
- if (x> width()) {
- x = 0;
- }
- // 刷新窗口, 让窗口重绘制, 整个窗口都重绘
- update(); // 间接调用 paintEvent
- }
- View Code
widget.h 的代码:
- #ifndef WIDGET_H
- #define WIDGET_H
- #include <QWidget>
- namespace Ui {
- class Widget;
- }
- class Widget : public QWidget
- {
- Q_OBJECT
- public:
- explicit Widget(QWidget *parent = 0);
- ~Widget();
- protected:
- // 重写绘图事件
- // 如果在窗口绘图, 必须放在绘图事件里实现
- // 绘图事件内部自动调用, 窗口需要重绘的时候(状态改变)
- void paintEvent(QPaintEvent *event);
- private slots:
- void on_pushButton_clicked();
- private:
- Ui::Widget *ui;
- int x;
- };
- #endif // WIDGET_H
- View Code
来源: https://www.cnblogs.com/mrlayfolk/p/13245819.html