引言Qt 的 2D 绘制系统是其 GUI 框架的基石支撑着从简单按钮到复杂图表的一切视觉呈现。理解这套系统的核心原理对于写出高性能、自定义程度高的 UI 代码至关重要。本文从源码级别剖析 Qt 2D 绘制的三层架构QPaintDevice、QPainter、QPaintEngine揭示绘制引擎如何实现跨平台抽象以及关键函数的底层实现。1. 绘制系统的三层架构Qt 的 2D 绘制系统由三个核心类构成形成了一个经典的门面Facade模式QPainter门面 → QPaintEngine引擎抽象 → QPaintDevice绘制目标QPainter提供绘制 API是用户的操作入口QPaintEngine抽象出不同后端绘制引擎的接口QPaintDevice抽象出各种绘制目标窗口、图片、打印设备1.1 QPaintDevice 源码解析QPaintDevice 是所有绘制目标的基类。它定义了在哪里画这个问题。// qtbase/src/gui/painting/qpaintdevice.hclassQ_GUI_EXPORTQPaintDevice{public:virtual~QPaintDevice();virtualQPaintEngine*paintEngine()const0;intwidth()const{returnd_ptr-width;}intheight()const{returnd_ptr-height;}intwidthMM()const{returnd_ptr-width*25.4/logicalDpiX();}intheightMM()const{returnd_ptr-height*25.4/logicalDpiY();}qrealdevicePixelRatio()const;QPainter::RenderHintsrenderHints()const;// 设备坐标系到物理坐标系的转换intlogicalDpiX()const;intlogicalDpiY()const;intphysicalDpiX()const;intphysicalDpiY()const;QPaintDeviceoperator(constQPaintDevice)delete;protected:QPaintDevice();QPaintDevice(constQPaintDevice);private:QScopedPointerQPaintDevicePrivated_ptr;friendclassQPainter;friendclassQPaintEngine;friendclassQCoreApplication;};关键点paintEngine()是纯虚函数每个子类必须实现返回对应的绘制引擎devicePixelRatio()支持高分屏每个逻辑像素对应多个物理像素logicalDpiX/Y与physicalDpiX/Y的区别用于区分逻辑分辨率和物理分辨率1.2 继承体系QPaintDevice 的子类层次如下// QWidget — 在窗口上绘制QWidget 持有 QPaintEngine// QImage — 内存图像可直接像素操作// QPixmap — 平台优化的图像依赖平台后端Windows GDI/Direct2D, macOS CG, X11 Cairo// QPicture — 记录绘制命令用于重放// QPrinter — 打印输出// QOpenGLPaintDevice — OpenGL 帧缓冲绘制Qt 5.10 之后引入了 QOpenGLPaintDevice 和 QSvgGenerator进一步扩展了绘制目标类型。2. QPaintEngine 抽象引擎QPaintEngine 是 Qt 实现跨平台绘制的核心抽象——每种绘制后端软件渲染、GDI、GDI、OpenGL、SVG、PDF都实现一个 QPaintEngine 子类。// qtbase/src/gui/painting/qpaintengine.hclassQ_GUI_EXPORTQPaintEngine{public:virtual~QPaintEngine();enumPaintEngineFeatures{PrimitiveTransform0x00000001,PatternTransform0x00000002,PixmapTransform0x00000004,PatternBrush0x00000008,LinearGradientFill0x00000010,RadialGradientFill0x00000020,ConicalGradientFill0x00000040,AlphaBlend0x00000080,PorterDuff0x00000100,// ... 更多特性};virtualvoidupdateState(constQPaintEngineStatestate)0;virtualvoiddraw(constQPaintEngineState*state)0;virtualvoiddrawPixmap(constQPaintEngineState*state,...)0;virtualvoiddrawTextItem(constQPaintEngineState*state,...)0;virtualvoiddrawPolygon(constQPaintEngineState*state,...)0;// ...};2.1 软件渲染引擎的入口Qt 的默认软件渲染引擎是 QRasterPaintEngine路径在qtbase/src/gui/painting/qpaintengine_raster.cpp在QRasterPaintEngine::draw()中所有的绘制原语最终都落入光栅化rasterization处理// qtbase/src/gui/painting/qpaintengine_raster.cppvoidQRasterPaintEngine::draw(constQPaintEngineState*state){// 根据当前绘制状态的类型分发到具体处理函数switch(state-type()){caseQPaintEngine::Ellipse:// 椭圆绘制break;caseQPaintEngine::Rect:// 矩形绘制break;caseQPaintEngine::Path:// 路径绘制最通用drawPath(state-strokePath().isEmpty()?state-fillPath():state-strokePath());break;caseQPaintEngine::Points:caseQPaintEngine::Lines:caseQPaintEngine::Polygons:// 点、线、多边形break;default:break;}}3. QPainter 绘制器核心3.1 构造函数与状态管理QPainter 的构造过程决定了它的绘制目标// qtbase/src/gui/painting/qpainter.cppQPainter::QPainter():d_ptr(newQPainterPrivate){// 默认构造的 painter 不绑定任何设备}QPainter::QPainter(QPaintDevice*pd):d_ptr(newQPainterPrivate){begin(pd);// 自动调用 begin()}begin() 的核心逻辑boolQPainter::begin(QPaintDevice*pd){Q_D(QPainter);// 检查设备有效性if(!pd||pd-paintEngine()nullptr){qWarning(QPainter::begin: Paint device returned null engine);returnfalse;}// 切换绘制引擎d-enginepd-paintEngine();d-devicepd;// 初始化状态画笔、画刷、字体、变换矩阵d-statenewQPainterState();d-state-penQPen();d-state-brushQBrush();d-state-fontQFont();d-state-opacity1.0;d-state-compositionModeQPainter::CompositionMode_SourceOver;// 设置默认抗锯齿d-engine-setAntialiasing(true);d-engine-setAlphaCorrection(true);d-engine-setState(d-state);returntrue;}3.2 save/restore 状态栈QPainter 维护一个状态栈save()将当前状态压栈restore()弹出恢复。这是绘制复杂图形时的常用技巧。// qtbase/src/gui/painting/qpainter.cppvoidQPainter::save(){Q_D(QPainter);d-stateStack.append(d-state);// 创建当前状态的深拷贝d-statenewQPainterState(*d-state);}voidQPainter::restore(){Q_D(QPainter);if(d-stateStack.isEmpty())return;// 删除当前状态deleted-state;// 弹出栈顶d-stated-stateStack.takeLast();// 更新引擎状态d-engine-updateState(*d-state);}注意save/restore 必须成对使用。建议使用 RAII 风格的QPainterStateSaver类避免遗漏voiddrawComplexGraphic(QPainterpainter){QPainterStateSaversaver(painter);// 自动 save// ... 复杂绘制操作 ...// 函数结束时自动 restore}3.3 坐标系统变换QPainter 支持丰富的坐标变换// 平移voidtranslate(qreal dx,qreal dy);// 旋转绕原点voidrotate(qreal angle);// 缩放voidscale(qreal sx,qreal sy);// 剪切voidshear(qreal sh,qreal sv);// 矩阵变换最通用voidsetMatrix(constQMatrixmatrix,boolcombinefalse);voidsetTransform(constQTransformtransform,boolcombinefalse);内部使用 QTransform3x3 仿射变换矩阵实现// qtbase/src/gui/math3d/qtransform.cpp// QTransform 内部结构/* * m11 m12 m13 (m13 为 0 表示平面变换) * m21 m22 m23 (m23 为 0 表示平面变换) * m31 m32 m33 (m33 为 1) * * | x | | m11 m12 0 | | x | * | y | | m21 m22 0 | | y | * | w | | m31 m32 1 | | 1 | */4. QPen 与 QBrush 源码解析4.1 QPen 画笔QPen 定义了如何画线——颜色、宽度、线型、线帽、连接方式。// qtbase/src/gui/painting/qpen.hclassQ_GUI_EXPORTQPen{public:enumPenStyle{NoPen,SolidPen,DashPen,DotPen,DashDotPen,DashDotDotPen,CustomDashPen};enumPenCapStyle{FlatCap,SquareCap,RoundCap};enumPenJoinStyle{MiterJoin,BevelJoin,RoundJoin,SvgMiterJoin};QPen():d(newQPenPrivate){}QPen(constQBrushbrush,qreal width,Qt::PenStyle styleQt::SolidLine);QBrushbrush()const;qrealwidth()const;qrealwidthF()const;PenStylestyle()const;PenCapStylecapStyle()const;PenJoinStylejoinStyle()const;// 虚函数允许子类自定义virtualvoidsetBrush(constQBrushb);};关键原理虚线样式DashPen是通过设置虚线模式DashPattern实现的// 虚线模式交替的 [画长, 空长]// 例如 [5, 3] 表示画5像素空3像素循环voidsetDashPattern(constQVectorqrealdashPattern);// 预设setStyle(Qt::DashLine);// dashPattern [4, 2]setStyle(Qt::DotLine);// dashPattern [1, 2]setStyle(Qt::DashDotLine);// dashPattern [4, 2, 1, 2]4.2 QBrush 画刷QBrush 定义了如何填充。支持纯色、渐变、纹理三种模式// qtbase/src/gui/painting/qbrush.hclassQ_GUI_EXPORTQBrush{public:enumStyle{NoBrush,SolidPattern,Dense1Pattern,Dense2Pattern,...,Dense7Pattern,LinearGradientPattern,RadialGradientPattern,ConicalGradientPattern,TexturePattern// 使用 QPixmap 作为纹理};QBrush():d(newQBrushPrivate),style(SolidPattern){}QBrush(constQColorcolor);QBrush(Qt::GlobalColor color);QBrush(constQBrushother);QBrush(constQPixmappixmap);// 纹理QBrush(constQImageimage);// 纹理QBrush(constQGradientgradient);// 渐变QGradient*gradient()const;Stylestyle()const;};5. 渐变填充源码剖析Qt 支持三种渐变线性渐变、径向渐变、圆锥渐变全部通过 QGradient 实现。// qtbase/src/gui/painting/qgradient.cppQLinearGradient::QLinearGradient(constQPointFstart,constQPointFstop){dnewQLinearGradientPrivate(start,stop);setSpread(QGradient::PadSpread);}// 渐变停止点voidQGradient::setColorAt(qreal pos,constQColorcolor){d_ptr-stops.append(QGradientStop(pos,color));}使用示例QLinearGradientgradient(0,0,width(),height());gradient.setColorAt(0.0,Qt::red);gradient.setColorAt(0.5,Qt::yellow);gradient.setColorAt(1.0,Qt::blue);gradient.setSpread(QGradient::RepeatSpread);// 重复平铺QPainterpainter(this);painter.setBrush(gradient);painter.drawRect(rect());6. QPainterPath 贝塞尔路径QPainterPath 是 Qt 2D 绘制的瑞士军刀——它表示一个任意复杂的路径可以复用、存储、检测命中。// qtbase/src/gui/painting/qpainterpath.hclassQ_GUI_EXPORTQPainterPath{public:voidmoveTo(constQPointFp);voidlineTo(constQPointFp);voidcubicTo(constQPointFc1,constQPointFc2,constQPointFend);voidquadTo(constQPointFc,constQPointFend);voidcloseSubpath();boolcontains(constQPointFpt)const;// 点是否在路径内QRectFboundingRect()const;voidaddEllipse(constQRectFrect);voidaddRect(constQRectFrect);voidaddText(constQStringtext,constQFontfont);voidaddPath(constQPainterPathpath);// 布尔运算QPainterPathunited(constQPainterPathother)const;QPainterPathintersected(constQPainterPathother)const;QPainterPathsubtracted(constQPainterPathother)const;};6.1 贝塞尔曲线的实现Qt 中的cubicTo()使用德卡斯特里奥de Casteljau算法实现三阶贝塞尔曲线// qtbase/src/gui/painting/qpainterpath.cppvoidQPainterPath::cubicTo(constQPointFc1,constQPointFc2,constQPointFendPoint){// 贝塞尔曲线参数方程:// B(t) (1-t)³P₀ 3(1-t)²tP₁ 3(1-t)t²P₂ t³P₃// 其中 t ∈ [0, 1], P₀起点, P₁c1, P₂c2, P₃终点Element e;e.typeMoveToElement;// 先 moveTo 到起点// 贝塞尔曲线转换为多段线t 分成 N 段存入 path// N 的大小由曲率决定保证精度}7. 绘制顺序与合成模式7.1 合成模式Composition ModeQt 支持 Porter-Duff 合成模式通过setCompositionMode()设置QPainterpainter(this);// 默认SourceOver源像素覆盖目标像素painter.setCompositionMode(QPainter::CompositionMode_SourceOver);// 叠加源像素加上目标像素painter.setCompositionMode(QPainter::CompositionMode_Plus);// 异或painter.setCompositionMode(QPainter::CompositionMode_Xor);// 只绘制在透明区域painter.setCompositionMode(QPainter::CompositionMode_SourceAtop);7.2 绘制顺序的重要性在 Qt 中绘制顺序决定最终效果。先画的被后画的覆盖voidPaintWidget::paintEvent(QPaintEvent*){QPainterpainter(this);// 1. 先画背景painter.fillRect(rect(),Qt::white);// 2. 再画内容内容在上层painter.setPen(Qt::blue);painter.drawText(rect(),Qt::AlignCenter,Hello Qt);// 3. 最后画遮罩遮罩在最上层painter.fillRect(0,0,100,100,QColor(255,0,0,128));// 50% 透明红色}8. 抗锯齿与渲染提示通过setRenderHint()控制渲染质量QPainterpainter(this);// 抗锯齿最重要painter.setRenderHint(QPainter::Antialiasing);// 文字抗锯齿painter.setRenderHint(QPainter::TextAntialiasing);// 平滑变换缩小/旋转时保持平滑painter.setRenderHint(QPainter::SmoothPixmapTransform);// 高质量反锯齿Qt 5.12使用 FreeType 或 CoreText 的高级反锯齿painter.setRenderHint(QPainter::HighQualityAntialiasing);9. Qt 6 的绘制系统变化Qt 6 对 2D 绘制系统做了重大改进9.1 QPainter 后端重写Qt 6.0 开始默认软件渲染引擎从 QRasterPaintEngine 升级为 QPaintEngineEx代号 Rasterizer2SIMD 优化利用 SSE2/NEON 向量指令加速光栅化新的光栅化器基于 tessellation曲面细分的多边形光栅化支持非凸多边形的高效填充批处理优化相同属性的绘制命令合并处理减少状态切换开销9.2 硬件加速Qt 6 在 macOS 和 Windows 上默认使用 Core Graphics 和 Direct2D 硬件加速// qtbase/src/gui/painting/qpainter.cppvoidQPainter::begin(QPaintDevice*pd){// Qt 6 会自动选择最佳后端// QOpenGLPaintDevice 或 QSvgPaintDevice 或 QRasterPaintEngine}10. 性能调优清单技巧说明使用 QPicture 缓存绘制命令QPicture pic; QPainter p(pic); ...draw...;之后只需painter.drawPicture(0, 0, pic);QImage vs QPixmap线程内像素操作用 QImage显示用 QPixmap减少状态切换相同属性的绘制连续执行减少 save/restore使用 QPainterPath::addPath 合并路径减少引擎调用次数避免每帧创建新 QPainter在 paintEvent 中复用或使用缓存使用 LogicalDpi vs DeviceDpi根据精度需求选择总结Qt 的 2D 绘制系统通过 QPainter门面、QPaintEngine引擎抽象、QPaintDevice目标抽象三层架构实现了写一份代码跑遍所有平台的能力。QPainterPath 提供了强大的路径操作能力QGradient 提供了丰富的渐变效果QPen/QBrush 则控制着如何画与如何填。理解这些底层机制是写出高性能 Qt UI 的前提。注若有发现问题欢迎大家提出来纠正