Qt 2D 绘制实战与性能优化深度解析

引言

上一篇文章解析了 Qt 2D 绘制系统的三层架构原理，本文聚焦实战。从绘制目标选型（QPixmap vs QImage vs QPicture）、双缓冲绘制、自定义控件 paintEvent 优化、图形基元的高效组合，到 Qt 6 硬件加速与 Vulkan 后端——每个实战问题都给出可落地的代码方案，并解释背后的性能原理。

1. QPixmap、QImage、QPicture 三者选型

这是 Qt 绘图中最容易选错的问题。三者的设计目标和使用场景截然不同。

1.1 QPixmap：屏幕显示首选

QPixmap 内部绑定平台后端（Windows GDI、macOS Core Graphics、X11），绘制到屏幕时零拷贝，是 UI 显示的标准选择：

// 典型用法：从文件加载并显示QPixmappixmap(":/resources/icon.png");painter.drawPixmap(0,0,pixmap);// 缩放（保持宽高比）pixmap=pixmap.scaled(targetSize,Qt::KeepAspectRatio,Qt::SmoothTransformation);// 注意：SmoothTransformation 比 FastTransformation 质量高但慢

性能陷阱：QPixmap::scaled() 每次调用都创建新对象，在 paintEvent 中调用会严重拖慢帧率：

// ❌ 错误：paintEvent 中每次都缩放voidMyWidget::paintEvent(QPaintEvent*){QPainterpainter(this);QPixmap pix=QPixmap(":/img.png").scaled(size(),Qt::KeepAspectRatio);painter.drawPixmap(0,0,pix);}// ✅ 正确：预缩放，缓存classMyWidget:publicQWidget{QPixmap m_cachedPix;voidloadImage(){m_cachedPix=QPixmap(":/img.png").scaled(size(),Qt::KeepAspectRatio,Qt::SmoothTransformation);}protected:voidpaintEvent(QPaintEvent*)override{QPainterpainter(this);painter.drawPixmap(0,0,m_cachedPix);}};

1.2 QImage：像素级操作与跨线程

需要直接操作像素数据（如图像滤镜）时必须用 QImage：

// 从文件加载 QImageQImageimage("photo.jpg");if(image.format()!=QImage::Format_ARGB32)image=image.convertToFormat(QImage::Format_ARGB32);// 直接像素操作：亮度调整for(inty=0;y<image.height();++y){QRgb*line=reinterpret_cast<QRgb*>(image.scanLine(y));for(intx=0;x<image.width();++x){intr=qRed(line[x])+30;intg=qGreen(line[x])+30;intb=qBlue(line[x])+30;line[x]=qRgb(qBound(0,r,255),qBound(0,g,255),qBound(0,b,255));}}// 或使用更快的 setPixelColor（但更慢）// image.setPixelColor(x, y, newColor);

跨线程处理：

// Worker 线程中处理图像（QImage 是线程安全的）classImageProcessor:publicQObject{Q_OBJECTpublicslots:voidprocess(constQString&path){QImagesrc(path);QImagedst(src.size(),QImage::Format_ARGB32);// 在工作线程中处理，不阻塞 UIfor(inty=0;y<src.height();++y){// 逐行处理...}// 处理完成后通过信号传递回主线程emitfinished(dst);}signals:voidfinished(constQImage&result);};

1.3 QPicture：绘制命令录制与回放

QPicture 记录 QPainter 的所有绘制命令，供后续无限次回放：

// 录制QPicture picture;{QPainterp(&picture);p.setPen(Qt::red);p.setBrush(Qt::blue);p.drawRect(10,10,100,50);p.drawText(10,80,"Recorded!");}// 录制完成，picture 包含绘制命令序列// 回放（可以无数次重复调用）voidMyWidget::paintEvent(QPaintEvent*){QPainterpainter(this);painter.drawPicture(0,0,picture);// 极快，无需重算}

源码解析：

// qtbase/src/gui/painting/qpicture.cppvoidQPicture::play(QPainter*painter)const{// 从内部缓冲区读取录制的绘制命令// 并逐一在目标 painter 上回放Q_D(constQPicture);QDataStreams(d->data);s.setByteOrder(QDataStream::LittleEndian);quint8 cmd;while(!s.atEnd()){s>>cmd;switch(cmd){casePDevCmd_drawRect:// 从数据流中读取参数并执行绘制break;// ... 其他命令}}}

2. paintEvent 优化：双缓冲与最小重绘

2.1 背景：Qt 的重绘机制

Qt 的 paintEvent 由以下情况触发：

• 显式调用update()/repaint()
• 窗口显示/隐藏/尺寸变化
• 遮挡区域恢复可见
• 顶层窗口移动

最小重绘原则：Qt 默认只重绘需要更新的区域（通过QRegion计算脏区域）：

// qtbase/src/widgets/kernel/qwidget.cppvoidQWidget::repaint(){// 立即重绘（同步）// 等价于 update() + 事件循环立即处理}voidQWidget::update(){// 异步：将 widget 加入待重绘队列// 多个 update() 调用会被合并为一次 paintEvent// 合并策略通过 QWidgetPrivate::updateOnScreenTimer 实现}

2.2 双缓冲：消除闪烁

双缓冲是最经典的 UI 绘制优化模式——先画到离屏图像，再一次性拷贝到屏幕：

classDoubleBufferWidget:publicQWidget{QPixmap m_backBuffer;QSize m_lastSize;protected:voidresizeEvent(QResizeEvent*event)override{// 窗口大小变化时重建离屏缓冲区if(size()!=m_lastSize){m_backBuffer=QPixmap(size());m_backBuffer.fill(Qt::white);// 可选：预填充背景m_lastSize=size();}QWidget::resizeEvent(event);}voidpaintEvent(QPaintEvent*)override{// === 离屏绘制（Back Buffer）===QPainterbufferPainter(&m_backBuffer);drawContent(bufferPainter);// 自定义绘制逻辑// === 一次性推送到屏幕 ===QPainterscreenPainter(this);screenPainter.drawPixmap(0,0,m_backBuffer);}voiddrawContent(QPainter&painter){// 复杂的绘制逻辑...painter.setRenderHint(QPainter::Antialiasing);painter.fillRect(rect(),Qt::white);// ... 大量绘制操作}};

双缓冲的核心原理：减少屏幕上绘制操作的次数，避免逐个图形元素绘制时的闪烁。

2.3 QBackingStore：Qt 官方双缓冲

Qt Widgets 框架内置了双缓冲支持，通过 QBackingStore 实现：

// 自定义 widget 启用 Qt 官方双缓冲voidMyWidget::paintEvent(QPaintEvent*){// QWidget 的 backingStore 默认已经做了离屏缓冲// 只需要关注绘制内容本身QPainterpainter(this);// 如果需要强制离屏缓冲：// QWidget::setAttribute(Qt::WA_PaintOnScreen, false);// QWidget::setAttribute(Qt::WA_OpaquePaintEvent, true);}

3. 高效绘制：批量操作与路径合并

3.1 批量绘制减少调用开销

QPainter 的每次绘制调用都有固定开销（状态检查、引擎调度）。将多个同类图形合并可以显著提升性能：

// ❌ 错误：逐个绘制 1000 个矩形，1000 次调用for(inti=0;i<1000;++i){painter.drawRect(QRectF(i*10,0,8,100));}// ✅ 正确：一次性绘制多个矩形QPainterPath path;for(inti=0;i<1000;++i){path.addRect(QRectF(i*10,0,8,100));}painter.fillPath(path,Qt::blue);// 一次调用完成 1000 个矩形

3.2 QPainterPath 的布尔运算

利用路径的布尔运算合并区域：

// 合并多个独立区域为一个路径QPainterPath combined;combined.addRect(rect1);combined.addRect(rect2);combined.addEllipse(ellipseRect);painter.fillPath(combined,gradient);// 一次填充替代多次

3.3 脏区域更新：只重画必要的部分

// 在数据变化时只更新变化区域voidChartWidget::updateData(constQVector<QPointF>&newData){// 计算新的数据范围QRectF newBounds=boundingRect(newData);QRectF dirty=oldBounds.united(newBounds);// 只更新包含数据的区域update(dirty.toRect());}voidChartWidget::paintEvent(QPaintEvent*event){// 只绘制事件中的脏区域QPainterpainter(this);painter.setClipRegion(event->region());// 关键：裁剪到脏区域// 绘制逻辑...}

4. 图形基元绘制实战

4.1 绘制正弦波形（高频更新场景）

classSineWaveWidget:publicQWidget{QVector<QPointF>m_points;intm_phase=0;public:SineWaveWidget(QWidget*parent=nullptr):QWidget(parent){setAttribute(Qt::WA_OpaquePaintEvent);setAttribute(Qt::WA_NoSystemBackground);// 60 FPS 定时器QTimer*timer=newQTimer(this);connect(timer,&QTimer::timeout,this,[this]{m_phase=(m_phase+5)%360;update();// 触发重绘});timer->start(16);// ~60 FPS}protected:voidpaintEvent(QPaintEvent*)override{QPainterpainter(this);painter.setRenderHint(QPainter::Antialiasing);painter.setPen(QPen(Qt::cyan,2));QPainterPath path;intw=width(),h=height();intamp=h/3;path.moveTo(0,h/2);for(intx=0;x<w;++x){doublerad=(m_phase+x*2)*M_PI/180.0;doubley=h/2-amp*sin(rad);path.lineTo(x,y);}painter.drawPath(path);}};

4.2 绘制雷达图（多边形与渐变）

voiddrawRadarChart(QPainter&painter,constQPointF&center,doubleradius,intaxes,constQVector<double>&values){// 绘制轴线painter.setPen(QPen(Qt::gray,1));for(inti=0;i<axes;++i){doubleangle=i*2*M_PI/axes-M_PI/2;painter.drawLine(center,QPointF(center.x()+radius*cos(angle),center.y()+radius*sin(angle)));}// 绘制网格圆for(intr=1;r<=4;++r){painter.drawEllipse(center,radius*r/4,radius*r/4);}// 绘制数据多边形QPainterPath dataPath;for(inti=0;i<axes;++i){doubleangle=i*2*M_PI/axes-M_PI/2;doublevalue=values[i];QPointFpt(center.x()+radius*value*cos(angle),center.y()+radius*value*sin(angle));if(i==0)dataPath.moveTo(pt);elsedataPath.lineTo(pt);}dataPath.closeSubpath();// 渐变填充QRadialGradientgradient(center,radius);gradient.setColorAt(0,QColor(255,100,100,180));gradient.setColorAt(1,QColor(255,100,100,30));painter.fillPath(dataPath,gradient);painter.drawPath(dataPath);}

5. 内存优化：缓存策略

5.1 层次化缓存

不同数据的缓存策略不同：

classChartRenderer:publicQObject{// L1 缓存：QPixmap（GPU 缓存，最快）QPixmap m_staticBgCache;// 静态背景，如网格线boolm_bgDirty=true;// L2 缓存：QPicture（命令缓存，中等）QPicture m_chartPicture;// 图表命令录制boolm_chartDirty=true;// 动态数据：直接绘制QVector<QPointF>m_liveData;// 实时数据，直接绘制voidrenderStaticBackground(){if(!m_bgDirty)return;m_staticBgCache=QPixmap(size());m_staticBgCache.fill(Qt::transparent);QPainterp(&m_staticBgCache);drawGrid(p);m_bgDirty=false;}voidpaintEvent(QPaintEvent*){QPainterpainter(this);// L1: 静态背景（缓存的 QPixmap）renderStaticBackground();painter.drawPixmap(0,0,m_staticBgCache);// L2: 图表（缓存的 QPicture）if(m_chartDirty){m_chartPicture=QPicture();QPainterp(&m_chartPicture);drawChart(p);m_chartDirty=false;}painter.drawPicture(0,0,m_chartPicture);// L3: 动态数据（直接绘制）painter.setPen(QPen(Qt::red,2));painter.drawPolyline(m_liveData.data(),m_liveData.size());}};

5.2 缓存失效策略

缓存最大的问题是"何时失效"：

voidChartRenderer::setData(constQVector<QPointF>&data){// 数据变化：只影响动态层，静态背景不变m_liveData=data;// m_staticBgCache 保持有效，不需要重建}voidChartRenderer::setGridVisible(boolvisible){// 网格参数变化：重建静态背景m_bgDirty=true;// 图表也可能受影响m_chartDirty=true;}voidChartRenderer::resizeEvent(QResizeEvent*event){// 尺寸变化：所有层都要重建m_bgDirty=true;m_chartDirty=true;}

6. Qt 6 硬件加速与 Vulkan 后端

6.1 启用硬件加速

Qt 6 默认启用硬件加速，在 Windows 上使用 Direct2D，在 macOS 上使用 Core Graphics。可以通过以下方式验证：

// 检查当前使用的后端QPaintDevice*device=this;QPaintEngine*engine=device->paintEngine();qDebug()<<"Paint engine:"<<engine->type();// QPaintEngine::Raster — 软件光栅化// QPaintEngine::OpenGL — OpenGL 加速// QPaintEngine::Direct2D — Windows Direct2D

6.2 QOpenGLWidget 中的 2D 绘制

对于需要极致性能的 2D 绘制场景，可以借助 OpenGL 加速：

classOpenGL2DWidget:publicQOpenGLWidget{protected:voidinitializeGL()override{// 设置 OpenGL 属性QSurfaceFormat format=this->format();format.setProfile(QSurfaceFormat::CoreProfile);format.setSamples(4);// MSAA 抗锯齿this->setFormat(format);}voidpaintGL()override{// 清屏glClearColor(1.0f,1.0f,1.0f,1.0f);glClear(GL_COLOR_BUFFER_BIT);// 使用 OpenGL 命令绘制 2D 图形（超高性能）// 顶点数组、VBO、纹理等drawTriangles();}voidresizeGL(intw,inth)override{glViewport(0,0,w,h);}};

6.3 Vulkan 后端（Qt 6.3+）

Qt 6.3 引入了实验性的 Vulkan 绘制后端：

// 启用 Vulkan 加速（需要显卡和驱动支持）QCoreApplication::setAttribute(Qt::AA_UseOpenGLES);// 或QCoreApplication::setAttribute(Qt::AA_UseDesktopOpenGL);// 在支持 Vulkan 的系统上，Qt 会自动选择 Vulkan 作为后端

7. 性能优化总结清单

结语

Qt 2D 绘制实战的核心是"选对工具、用对策略"。QPixmap 用于屏幕显示、QImage 用于像素处理、QPicture 用于命令缓存；双缓冲消除闪烁、脏区域更新减少浪费、层次化缓存分离静态与动态内容。在 Qt 6 时代，硬件加速让 2D 绘制性能进一步突破，理解底层原理才能在高频 UI 场景中游刃有余。

注：若有发现问题欢迎大家提出来纠正