企业官网建设流程全解析

🎬 艾莉丝的简介：

前言

一、绘图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 编写

#ifndefWIDGET_H#defineWIDGET_H#include<QWidget>QT_BEGIN_NAMESPACEnamespaceUi{classWidget;}QT_END_NAMESPACEclassWidget:publicQWidget{Q_OBJECTpublic:Widget(QWidget*parent=nullptr);~Widget();// 声明绘图事件函数voidpaintEvent(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<QPainter>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);}Widget::~Widget(){deleteui;}voidWidget::paintEvent(QPaintEvent*event){(void)event;// 创建绘图对象，this为画板（当前Widget）QPainterpainter(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，高度200painter.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(横坐标, 纵坐标, "文本内容")
   1. 横坐标：文本最左侧的位置；
   2. 纵坐标：文本基线的位置，类比英文四线格的第三条线，字母默认在基线之上。

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

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

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

2.3 QPen 画笔详解

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

2.3.1 画笔样式枚举 Qt::PenStyle

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

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

#ifndefWIDGET_H#defineWIDGET_H#include<QWidget>QT_BEGIN_NAMESPACEnamespaceUi{classWidget;}QT_END_NAMESPACEclassWidget:publicQWidget{Q_OBJECTpublic:Widget(QWidget*parent=nullptr);~Widget();voidpaintEvent(QPaintEvent*event);private:Ui::Widget*ui;};#endif// WIDGET_H

2.5.2 源文件 widget.cpp

#include"widget.h"#include"ui_widget.h"#include<QPainter>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);}Widget::~Widget(){deleteui;}voidWidget::paintEvent(QPaintEvent*event){(void)event;QPainterpainter(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对象)绘制图片，图片左上角对齐指定坐标：

voidWidget::paintEvent(QPaintEvent*event){(void)event;QPainterpainter(this);// 加载资源中的图片QPixmappixmap(":/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、高300painter.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. 旋转+平移完整代码

voidWidget::paintEvent(QPaintEvent*event){(void)event;QPainterpainter(this);QPixmappixmap(":/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<QPainter>#include<QPicture>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);// 创建绘图命令记录对象QPicture pic;QPainter painter;// 开始录制：将绘图目标绑定为QPicturepainter.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(){deleteui;}

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

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

voidWidget::paintEvent(QPaintEvent*){QPainterpainter(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. 四大核心类分工
   1. QPainter（绘图者）：执行所有drawXXX绘图方法，核心动作执行者；
   2. QPaintDevice（画板）：绘图目标载体，QWidget是其子类，所有窗口均可作为画板；
   3. QPen（画笔）：控制线条的颜色、粗细、虚实样式；
   4. 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. 四类图像类选型建议
   1. 界面展示图片 → 优先QPixmap；
   2. 图片读写、像素编辑 → 优先QImage；
   3. 黑白图标、遮罩 → 使用QBitmap；
   4. 记录/回放绘图动作、精简绘图指令 → 使用QPicture。

4.6 代码通用规范

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

结尾

uu们，本文的内容到这里就全部结束了，艾莉丝在这里再次感谢您的阅读！

艾莉丝努力练剑 C/C++ & Linux 底层探索者 | 一个正在努力练剑的技术博主 👀【关注】跟随我一起深耕技术领域，见证每一次成长。 ❤️【点赞】让优质内容被更多人看见，让知识传递更有力量。 ⭐【收藏】把核心知识点存好，在需要时随时查、随时用。 💬【评论】分享你的经验或疑问，评论区一起交流避坑！ 不要忘记给博主“一键四连”哦！ “今日练剑达成！” “技术之路难免有困惑，但同行的人会让前进更有方向。”

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

往期回顾：

【QT】界面优化：QSS

🗡博主在这里放了一只小狗，大家看完了摸摸小狗放松一下吧！🗡૮₍ ˶ ˊ ᴥ ˋ˶₎ა