小丸子博客

本站只有一些笔记，请不要有任何恶意

分享：【Qt】界面优化：绘图API

· 小丸子 · 阅读 2 · 分类： 技术分享

今天翻到一篇不错的技术分享，看完之后自己也琢磨了一下，把思路梳理记录下来。

🎬 个人主页：艾莉丝努力练剑

❄专栏传送门：《C语言》《数据结构与算法》《C/C++干货分享&学习过程记录》
《Linux操作系统编程详解》《笔试/面试常见算法：从基础到进阶》《Python干货分享》

⭐️为天地立心，为生民立命，为往圣继绝学，为万世开太平

🎬 艾莉丝的简介：

文章目录

1 ~> Qt绘图API整体介绍 1.3 绘图核心注意事项（绘图事件规则） 2 ~> Qt基础图形绘制实操 2.2 各类基础图形绘制 2.3 QPen 画笔详解 2.4 QBrush 画刷详解 2.5 图形绘制综合实操案例 3 ~> Qt图片绘制与图像相关类 3.2 Qt四大图像类整体介绍 3.3 QPicture 绘图命令录制与回放实操 4 ~> 全文核心总结 结尾

前言

一、绘图API知识图谱

二、学习导入语

在Qt开发中，大家日常使用的按钮、窗口、标签等控件，本质都是Qt框架提前封装好的绘图效果。当工程中出现现有标准控件无法实现的自定义界面、特殊图形、个性化视觉效果时，就需要手动使用Qt绘图API完成自定义绘制。本文完整梳理Qt绘图体系的全部知识点，从四大核心绘图类、绘图事件规则，到线段、矩形、圆形、文字等基础图形绘制，再到画笔、画刷的样式配置，最后延伸至图片绘制、坐标变换以及Qt四大图像类的区别与实操。东西配套完整代码案例、原搞懂读与易错点说明，适合作为知识点复盘、实操查阅的复习资料，能够帮助使用者完整梳理Qt绘图API的逻辑链条，掌握自定义控件与自定义图形绘制的全流程。

1 ~> Qt绘图API整体介绍

1.1 绘图API的作用与使用场景

Qt中所有自带控件，底层都是通过绘图逻辑渲染展示。在绝大多数常规开发场景下，大家直接使用Qt封装好的控件即可，不需要手动调用绘图API。只有当标准控件无法满足业务需求，需要DIY自定义控件、特殊视觉图形、个性化界面效果时，才会使用Qt提供的绘图API手动完成绘制干活。

1.2 绘图四大核心类

Qt绘图体系依托四个核心类实现，四类分工明确、相互配合，是所有绘图操作的基础：

1.2.1 QPainter

被称作绘图者/画家，是执行绘图动作的核心对象。该类提供了大量以drawXXX开头的成员方法，支持绘制线段、矩形、圆形、文字、图片等所有图形元素，所有绘图动作都由QPainter发起。

1.2.2 QPaintDevice

被称作画板，作用是指定绘图的目标载体，也就是QPainter绘制的东西最终展示在哪个对象上。大家常用的QWidget是QPaintDevice的子类，因此所有QWidget窗口、控件都可以直接作为画板进行绘图。

1.2.3 QPen

被称作画笔，专门定义线条的外观属性。绘图时所有轮廓线条的颜色、粗细、虚实样式，都由QPen对象控制。

1.2.4 QBrush

被称作画刷，专门定义封闭图形内部的填充效果。当绘制矩形、圆形等封闭图形时，图形内部的填充颜色、填充纹理、填充图案，都由QBrush对象控制。

1.3 绘图核心注意事项（绘图事件规则）

Qt绘图绝对不能在QWidget的构造函数中执行，所有绘图逻辑务必写在paintEvent事件处理函数中，该函数对应QPaintEvent绘图事件。

1.3.1 paintEvent 事件触发时机

当满足以下任意一种场景时，Qt会自动触发paintEvent，执行内部的绘图逻辑：

1. 控件首次创建、界面初始化时；
2. 控件被其他窗口遮挡，遮挡解除后；
3. 窗口被最小化，之后重新还原显示时；
4. 控件/窗口的大小发生改变时；
5. 代码中主动调用repaint()或update()成员函数，手动触发绘图。

1.3.2 禁止在构造函数绘图的原因

控件构造阶段，窗口/控件的渲染载体还未完成初始化，此时执行绘图不会生效。同时窗口遮挡、大小变化、最小化还原等操作会刷新界面，构造函数中绘制的东西会被刷新覆盖，最终导致界面显示异常。而paintEvent会在界面每一次刷新时自动执行，保证绘制内容持续正常展示。

2 ~> Qt基础图形绘制实操

2.1 前置代码准备：重写paintEvent函数

想要实现自定义绘图，第一步需要在自定义QWidget类中声明并重写paintEvent函数，分为头文件和源文件两部分编写。

2.1.1 头文件 widget.h 编写

#ifndef WIDGET_H
#define WIDGET_H

#include

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget:public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
    // 声明绘图事件函数
    void paintEvent(QPaintEvent *event);

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

2.1.2 源文件 widget.cpp 基础框架

绘图逻辑全部写在paintEvent函数内部，同时需要引入QPainter头文件。(void) event;用于消除未使用参数的编译警告，QPainter painter(this);创建绘图对象，其中this代表当前Widget对象（画板）。

#include "widget.h"
#include"ui_widget.h"
#include

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::paintEvent(QPaintEvent *event)
{
    (void) event;
    // 创建绘图对象，this为画板（当前Widget）
    QPainter painter(this);
    // 所有绘图逻辑写在此处
}

2.1.3 QPainter对象创建规则

QPainter painter(this);是在栈区创建的局部对象，函数执行完成后会自动销毁，不需要手动调用释放、析构函数，使用简单安全。

2.2 各类基础图形绘制

2.2.1 绘制线段

drawLine()是绘制线段的核心方法，支持两种传参方式，可实现横向、纵向、斜向线段绘制。

1. 方式一：直接传入坐标数值 语法：drawLine(起点x, 起点y, 终点x, 终点y)

// 横向线段：起点(20,20) 终点(200,20)
painter.drawLine(20, 20, 200, 20);
// 纵向线段：起点(20,20) 终点(20,300)
painter.drawLine(20, 20, 20, 300);
// 斜向线段：起点(20,20) 终点(100,300)
painter.drawLine(20, 20, 100, 300);

1. 方式二：传入QPoint坐标对象 将起点、终点封装为QPoint对象，代码可读性更高：

// 横向线段，两个QPoint对象分别代表起点、终点
painter.drawLine(QPoint(20, 100), QPoint(200, 100));

2.2.2 绘制矩形

使用drawRect()绘制矩形，语法规则：drawRect(左上角x, 左上角y, 矩形宽度, 矩形高度)。

// 左上角坐标(100,100)，宽度300，高度200
painter.drawRect(100, 100, 300, 200);

2.2.3 绘制圆形与椭圆形

Qt中没有单独的“画圆”方法，drawEllipse()既可以绘制正圆，也可以绘制椭圆，原理是基于外接矩形绘制：函数参数定义外接矩形的位置和尺寸，椭圆/圆形会自适应贴合外接矩形。 语法：drawEllipse(外接矩形左上角x, 外接矩形左上角y, 宽度, 高度)

1. 正圆形：外接矩形宽、高数值相等

// 外接矩形宽高均为100，绘制正圆
painter.drawEllipse(200, 200, 100, 100);

1. 椭圆形：外接矩形宽、高数值不相等

// 宽度200、高度50，绘制椭圆
painter.drawEllipse(200, 200, 200, 50);

2.2.4 绘制文本

使用drawText()绘制文字，同时支持自定义字体样式，核心难点是文本基线（baseline） 的搞懂。

1. 基础文本绘制与基线规则 语法：drawText(横坐标, 纵坐标, "文本内容")
横坐标：文本最左侧的位置；
2. 纵坐标：文本基线的位置，类比英文四线格的第三条线，字母默认在基线之上。

// 横坐标0，基线纵坐标100，绘制文字
painter.drawText(0, 100, "hello");

1. 若纵坐标数值过小，文字会超出可视范围导致无法显示，适当增大纵坐标即可正常展示。
2. 自定义字体样式 QFont 通过QFont类设置字体类型、字号，再调用setFont()将字体绑定到绘图对象：

// 创建字体对象：微软雅黑，字号24
QFont font("微软雅黑",24);
// 绘图对象应用该字体
painter.setFont(font);
// 绘制文本
painter.drawText(0, 100, "hello");

2.3 QPen 画笔详解

画笔QPen用于控制所有线条的外观，可配置颜色、线条粗细、线条样式三大属性，配置完成后务必调用setPen()绑定到QPainter才会生效。

2.3.1 画笔样式枚举 Qt::PenStyle

Qt提供多种预设线条样式，常用枚举值如下：

枚举常量数值样式说明Qt::NoPen0无线条Qt::SolidLine1实线（默认样式）Qt::DashLine2虚线（短划线）Qt::DotLine3点线Qt::DashDotLine4点划线Qt::DashDotDotLine5一划两点式线条

2.3.2 画笔完整配置代码

// 1. 创建画笔对象
QPen pen;
// 2. 设置线条颜色：RGB(255,0,0) 红色
pen.setColor(QColor(255,0,0));
// 3. 设置线条粗细：宽度5像素
pen.setWidth(5);
// 4. 设置线条样式：虚线
pen.setStyle(Qt::DashLine);
// 5. 关键：将画笔绑定到绘图对象，配置才会生效
painter.setPen(pen);

// 绑定后绘制的图形，都会使用当前画笔样式
painter.drawLine(20,20,200,20);

2.4 QBrush 画刷详解

画刷QBrush用于控制封闭图形（矩形、圆形、椭圆）的内部填充效果，可配置填充颜色、填充样式。默认状态下画刷为Qt::NoBrush（无填充），因此仅设置颜色无法实现填充，务必手动指定填充样式。

2.4.1 QBrush 构造函数与常用成员函数

QBrush提供多种重载构造函数，支持直接通过颜色、样式、图片创建画刷；核心成员函数：

  • setColor()：设置填充颜色；
  • setStyle()：设置填充样式；
  • setTexture()/setTextureImage()：使用图片作为填充纹理。

2.4.2 画刷样式枚举 Qt::BrushStyle

Qt内置丰富的填充样式，常用类型：

1. Qt::SolidPattern：实心纯色填充（最常用）；
2. Qt::Dense1Pattern ~ Qt::Dense7Pattern：不同密度的点阵填充；
3. Qt::HorPattern：水平线条填充；
4. Qt::VerPattern：垂直线条填充；
5. Qt::CrossPattern：网格交叉线填充；
6. 渐变类样式：线性渐变、径向渐变、锥形渐变；
7. Qt::TexturePattern：图片纹理填充。

2.4.3 画刷完整配置代码

// 1. 创建画刷对象
QBrush brush;
// 2. 设置填充颜色：RGB(0,255,0) 绿色
brush.setColor(QColor(0, 255, 0));
// 3. 设置填充样式：实心填充（必须配置，否则无填充效果）
brush.setStyle(Qt::SolidPattern);
// 4. 将画刷绑定到绘图对象
painter.setBrush(brush);

// 绘制椭圆，内部会被绿色实心填充
painter.drawEllipse(200, 200, 400, 100);

2.4.4 多样式填充演示

更换setStyle()的参数，即可切换不同填充效果：

// 点阵填充
brush.setStyle(Qt::Dense1Pattern);
// 网格交叉线填充
brush.setStyle(Qt::CrossPattern);

2.5 图形绘制综合实操案例

整合画笔、画刷、椭圆绘制的完整可运行代码，包含头文件与源文件：

2.5.1 头文件 widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
    void paintEvent(QPaintEvent *event);

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

2.5.2 源文件 widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::paintEvent(QPaintEvent *event)
{
    (void)event;
    QPainter painter(this);

    // 配置画笔：橙红色、5像素粗、虚线
    QPen pen;
    pen.setColor(QColor(255,122,23));
    pen.setWidth(5);
    pen.setStyle(Qt::DashLine);
    painter.setPen(pen);

    // 配置画刷：土黄色、网格填充
    QBrush brush;
    brush.setColor(QColor(155,122,44));
    brush.setStyle(Qt::CrossPattern);
    painter.setBrush(brush);

    // 绘制椭圆（外接矩形宽100，高200）
    painter.drawEllipse(200,200,100,200);
}

3 ~> Qt图片绘制与图像相关类

3.1 QPixmap 绘制图片

QPixmap是Qt专门为屏幕图像显示优化的类，也是界面中绘制图片的首选。绘制图片前需要将图片添加到Qt资源文件（.qrc）中，通过资源路径加载图片。

3.1.1 资源文件准备

1. 在工程中新建资源文件resoures.qrc；
2. 添加前缀、导入本地图片文件（如cat.jpg）；
3. 图片资源路径格式：:/图片文件名。

3.1.2 基础图片绘制（指定坐标）

使用drawPixmap(图片x坐标, 图片y坐标, QPixmap对象)绘制图片，图片左上角对齐指定坐标：

void Widget::paintEvent(QPaintEvent *event)
{
    (void)event;
    QPainter painter(this);
    // 加载资源中的图片
    QPixmap pixmap(":/cat.jpg");
    // 图片左上角对齐窗口(0,0)位置
    painter.drawPixmap(0, 0, pixmap);
    // 图片左上角对齐窗口(100,100)位置
    painter.drawPixmap(100, 100, pixmap);
}

3.1.3 图片缩放绘制

重载drawPixmap方法，新增宽度、高度参数，实现图片缩放展示： 语法：drawPixmap(x, y, 缩放宽度, 缩放高度, QPixmap对象)

// 在(100,100)位置绘制图片，缩放到宽400、高300
painter.drawPixmap(100,100,400,300,pixmap);

3.1.4 图片旋转与坐标变换

图片旋转的本质是旋转QPainter绘图坐标系，Qt提供rotate()旋转方法、translate()坐标平移方法，二者配合使用解决旋转偏移麻烦。

1. 旋转原理与麻烦 painter.rotate(角度)：默认以窗口坐标系原点(0,0) 为中心旋转。若直接旋转图片，图片会转出可视区域，导致界面看不到内容。
2. 坐标平移修正偏移 使用translate(x偏移, y偏移)平移坐标系原点，将旋转中心调整到可视区域内。窗口向右为X正方向、向下为Y正方向，反向平移使用负数参数。
3. 旋转+平移完整代码

void Widget::paintEvent(QPaintEvent *event)
{
    (void)event;
    QPainter painter(this);
    QPixmap pixmap(":/wife.png");

    // 坐标系整体旋转180度
    painter.rotate(180);
    // 平移坐标系原点，修正旋转后图片位置
    painter.translate(-800,-600);
    // 绘制缩放后的图片
    painter.drawPixmap(100,100,400,500,pixmap);
}

3.2 Qt四大图像类整体介绍

Qt提供四个专门处理图像数据的类，四类底层均为QPaintDevice画板，适用场景各有区分，开发中最常用QPixmap和QImage。

3.2.1 QPixmap

针对屏幕显示做深度优化，渲染效率高，是UI界面展示图片的首选；不适合做复杂像素编辑、大量IO读写操作。

3.2.2 QImage

针对文件IO读写、像素级编辑优化，支持直接访问、修改图片每一个像素点，适合图片处理、图像算法开发；屏幕渲染效率弱于QPixmap。

3.2.3 QBitmap

QPixmap的子类，是特殊的位图，仅支持黑白两种颜色（颜色深度为1），多用于制作图标、遮罩、光标等二值图像。

3.2.4 QPicture

功能区别于普通图片类，核心作用是录制与回放QPainter绘图命令。它不会保存图片像素，而是记录所有绘图动作（画线段、画圆、文字等指令），文件体积极小，类似游戏录像只记录操作而非录制画面。

3.3 QPicture 绘图命令录制与回放实操

3.3.1 录制绘图命令并保存文件

在构造函数中完成绘图命令录制，将指令保存为本地文件：

#include "widget.h"
#include "ui_widget.h"
#include
#include

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 创建绘图命令记录对象
    QPicture pic;
    QPainter painter;
    // 开始录制：将绘图目标绑定为QPicture
    painter.begin(&pic);
    // 配置画笔、绘制图形（录制动作）
    painter.setPen(QPen(Qt::red));
    painter.drawEllipse(QPoint(200,200),100,100);
    // 结束录制
    painter.end();
    // 将录制的绘图指令保存到本地文件
    pic.save("C:\\Users\\Lenovo\\Desktop\\Test_Pic\\pic.pic");
}

Widget::~Widget()
{
    delete ui;
}

3.3.2 加载文件并回放绘图指令

在paintEvent中加载保存的指令文件，回放所有绘图动作：

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QPicture pic;
    // 加载本地保存的绘图指令文件
    pic.load("C:\\Users\\Lenovo\\Desktop\\Test_Pic\\pic.pic");
    // 回放绘图指令，在窗口(0,0)位置执行绘制
    painter.drawPicture(0,0,pic);
}

  • 补充说明：QPicture是Qt私有格式，仅能在Qt程序中加载回放，无法使用第三方图片编辑器打开。

4 ~> 全文核心总结

4.1 核心体系与四大基础类

1. 整体定位：Qt绘图API用于实现自定义控件、特殊图形效果，常规开发使用标准控件即可，无需手动绘图；
2. 四大核心类分工
QPainter（绘图者）：执行所有drawXXX绘图方法，核心动作执行者；
3. QPaintDevice（画板）：绘图目标载体，QWidget是其子类，所有窗口均可作为画板；
4. QPen（画笔）：控制线条的颜色、粗细、虚实样式；
5. QBrush（画刷）：控制封闭图形的内部填充颜色、纹理、图案，默认无填充。

4.2 绘图事件核心规则

1. 绘图位置强制要求：所有绘图逻辑必须写在paintEvent(QPaintEvent *event)函数中，禁止在构造函数绘图；
2. paintEvent触发场景：控件初始化、遮挡解除、窗口最小化还原、控件大小改变、主动调用repaint()/update()，五种场景自动触发重绘；
3. QPainter对象：建议在栈区创建局部对象，无需手动释放。

4.3 基础图形绘制重点

1. 线段：drawLine支持坐标直接传参、QPoint对象传参，可绘制横、竖、斜线；
2. 矩形：drawRect(左上角x, 左上角y, 宽, 高)；
3. 圆/椭圆：drawEllipse基于外接矩形绘制，宽高相等为正圆，不等为椭圆；
4. 文本：drawText纵坐标为文本基线，基线位置过低会导致文字不可见；使用QFont设置字体类型与字号，通过setFont绑定到绘图对象。

4.4 画笔与画刷使用要点

1. QPen：配置颜色、线宽、样式后，必须调用setPen()绑定到QPainter才生效；常用样式包括实线、虚线、点线等；
2. QBrush：仅设置颜色无法填充图形，必须调用setStyle()指定填充样式；支持实心、点阵、网格、渐变、图片纹理等多种填充模式。

4.5 图片绘制与四大图像类选型

1. QPixmap：界面图片显示首选，配合资源文件加载图片，drawPixmap支持定位、缩放展示图片；
2. 坐标变换：rotate()旋转坐标系（默认绕原点(0,0)旋转），translate()平移坐标系修正旋转偏移，二者配合实现图片旋转展示；
3. 四类图像类选型建议
界面展示图片 → 优先QPixmap；
4. 图片读写、像素编辑 → 优先QImage；
5. 黑白图标、遮罩 → 使用QBitmap；
6. 记录/回放绘图动作、精简绘图指令 → 使用QPicture。

4.6 代码通用规范

1. 所有绘图代码均需引入头文件：`、、`等；
2. 资源图片必须添加到.qrc资源文件，使用:/资源名格式加载；
3. QPicture仅Qt内部可用，属于私有绘图指令格式，不兼容第三方图片工具。

结尾

uu们，本文的内容到这里就全部完成了，艾莉丝在这里再次

艾莉丝努力练剑

C/C++ & Linux 底层探索者 | 一个正在努力练剑的技术博主

👀 【关注】 跟随我一起深耕技术领域，见证每一次成长。

❤️
【点赞】 让优质内容被更多人看见，让知识传递更有力量。

⭐
【收藏】 把核心知识点存好，在需要时随时查、随时用。

💬
【评论】 分享你的经验或疑问，评论区一起交流避坑！

不要忘记给博主“一键四连”哦！

“今日练剑达成！”

“技术之路难免有困惑，但同行的人会让前进更有方向。”

结语：希望对学习Linux相关内容的uu有所帮助，不要忘记给博主“一键四连”哦！

往期回顾：

【QT】界面优化：QSS

🗡博主在这里放了一只小狗，大家看完了摸摸小狗放松一下吧！🗡
>
૮₍ ˶ ˊ ᴥ ˋ˶₎ა
暂时整理到这里。以上都是个人理解，可能有疏漏，欢迎指正。
标签： #运维 #Linux #网络 #开发语言 #udp #tcp/ip #qt

评论 (0)

暂无评论