Qt 实现金属表盘源码分享

Qt 实现金属表盘源码分享

• 一、效果展示
• 二、源码分享
• • 1、工程结构
  • 2、dialwidget.h
  • 3、dialwidget.cpp
  • 4、mainWindow.cpp
  • 5、完整工程下载
• 三、实现原理
• • 1、 QPainter 的基本概念
  • 2、绘图设备与坐标系
  • 3、 基本绘图操作
  • • 3.1、 绘制几何图形
    • 3.2 、绘制文本
    • 3.3 、绘制图像
  • 4、 画笔（QPen）与画刷（QBrush）
  • • 4.1、 QPen – 控制轮廓绘制
    • 4.2 、QBrush – 控制填充
  • 5、 高级绘图特性
  • • 5.1、 抗锯齿（Antialiasing）
    • 5.2 、合成模式（Composition Mode）
    • 5.3 、裁剪区域（Clipping）
  • 6、 在速度表项目中的应用
  • • 6.1、 坐标系变换
    • 6.2 、渐变效果
    • 6.3 、文本绘制与对齐
  • 7、性能优化建议
  • 8、Qt6 中的新特性
  • 9、常见问题与调试技巧
  • • 9.1、 绘图不显示
    • 9.2、 性能问题
    • 9.3、 坐标计算错误
  • 总结

一、效果展示

二、源码分享

1、工程结构

2、dialwidget.h

3、dialwidget.cpp

4、mainWindow.cpp

5、完整工程下载

文章顶部下载

三、实现原理

QPainter 是 Qt 框架中用于执行绘图操作的核心类，它提供了丰富的 API 来绘制各种图形、文本和图像。在 Qt6 中，QPainter 的功能得到了进一步增强和优化。

1、 QPainter 的基本概念

QPainter 采用画家算法（Painter’s Algorithm）进行绘图，即后绘制的图形会覆盖先绘制的图形。它支持在多种绘图设备上工作：

• QWidget：在窗口部件上绘图
• QPixmap：在位图上绘图
• QImage：在图像上绘图
• QPrinter：在打印机上绘图

2、绘图设备与坐标系

// 创建 QPainter 对象
QPainter painter(this); // 在 QWidget 上绘图
painter.setRenderHint(QPainter::Antialiasing); // 开启抗锯齿

QPainter 使用逻辑坐标系，默认原点在左上角，X轴向右，Y轴向下。可以通过以下方法变换坐标系：

// 坐标变换
painter.translate(100, 100); // 平移坐标系
painter.rotate(45); // 旋转坐标系
painter.scale(2.0, 2.0); // 缩放坐标系
painter.shear(0.5, 0); // 错切变换

3、 基本绘图操作

3.1、 绘制几何图形

// 绘制线条
painter.drawLine(QPointF(0, 0), QPointF(100, 100));

// 绘制矩形
painter.drawRect(QRectF(10, 10, 100, 50));

// 绘制椭圆/圆形
painter.drawEllipse(QPointF(50, 50), 30, 30);

// 绘制多边形
QPolygonF polygon;
polygon << QPointF(0, 0) << QPointF(50, 0) << QPointF(25, 50);
painter.drawPolygon(polygon);

3.2 、绘制文本

// 设置字体
QFont font("Arial", 12, QFont::Bold);
painter.setFont(font);

// 绘制文本
painter.drawText(QPointF(10, 30), "Hello Qt6!");
painter.drawText(QRectF(10, 50, 200, 50), Qt::AlignCenter, "居中文本");

3.3 、绘制图像

QPixmap pixmap(":/images/logo.png");
painter.drawPixmap(10, 10, pixmap);

4、 画笔（QPen）与画刷（QBrush）

4.1、 QPen – 控制轮廓绘制

QPen pen;
pen.setColor(Qt::red); // 设置颜色
pen.setWidth(3); // 设置线宽
pen.setStyle(Qt::DashLine); // 设置线型
pen.setCapStyle(Qt::RoundCap); // 设置端点样式
pen.setJoinStyle(Qt::RoundJoin); // 设置连接样式
painter.setPen(pen);

4.2 、QBrush – 控制填充

QBrush brush;
brush.setColor(Qt::blue); // 纯色填充
brush.setStyle(Qt::SolidPattern); // 填充样式

// 渐变填充
QLinearGradient gradient(0, 0, 100, 100);
gradient.setColorAt(0, Qt::white);
gradient.setColorAt(1, Qt::black);
brush = QBrush(gradient);

painter.setBrush(brush);

5、 高级绘图特性

5.1、 抗锯齿（Antialiasing）

painter.setRenderHint(QPainter::Antialiasing); // 开启抗锯齿
painter.setRenderHint(QPainter::TextAntialiasing); // 文本抗锯齿
painter.setRenderHint(QPainter::SmoothPixmapTransform); // 平滑图像变换

5.2 、合成模式（Composition Mode）

// 设置合成模式
painter.setCompositionMode(QPainter::CompositionMode_SourceOver); // 默认：源覆盖目标
painter.setCompositionMode(QPainter::CompositionMode_SourceIn); // 源在目标内部
painter.setCompositionMode(QPainter::CompositionMode_Xor); // 异或模式

5.3 、裁剪区域（Clipping）

// 设置裁剪区域
QPainterPath clipPath;
clipPath.addEllipse(50, 50, 100, 100);
painter.setClipPath(clipPath);

// 恢复裁剪
painter.setClipping(false);

6、 在速度表项目中的应用

在本项目的 SpeedMeterWidget::paintEvent() 中，我们充分利用了 QPainter 的各种功能：

6.1、 坐标系变换

// 保存当前绘图状态
painter.save();

// 平移坐标系到圆心
painter.translate(centerX, centerY);

// 旋转坐标系绘制刻度线
painter.rotate(startAngle);
for (int i = 0; i <= totalSteps; ++i) {
painter.drawLine(...);
painter.rotate(rotateStep);
}

// 恢复绘图状态
painter.restore();

6.2 、渐变效果

// 创建径向渐变
QRadialGradient radialGrad(centerX, centerY, radius * 0.6);
radialGrad.setColorAt(0, QColor("#E43223")); // 中心颜色
radialGrad.setColorAt(1, QColor("#00E43223")); // 边缘颜色（透明）

painter.setBrush(radialGrad);
painter.drawEllipse(QPointF(centerX, centerY), radius * 0.6, radius * 0.6);

6.3 、文本绘制与对齐

// 计算文本宽度进行居中
QFontMetricsF fm(numFont);
QString text = QString::number(qRound(currentDrawVal));
qreal textW = fm.horizontalAdvance(text);
painter.drawText(QPointF(–textW / 2.0, offsetY), text);

7、性能优化建议

8、Qt6 中的新特性

Qt6 对 QPainter 进行了以下改进：

• 更好的 HiDPI 支持：自动处理高分辨率显示
• 改进的文本渲染：支持更多字体特性
• 增强的渐变效果：支持更多渐变类型
• 性能优化：绘图操作更加高效

9、常见问题与调试技巧

9.1、 绘图不显示

• 检查是否在 paintEvent 中绘图
• 确认调用了 update() 触发重绘
• 验证绘图区域是否在可见范围内

9.2、 性能问题

• 使用 QElapsedTimer 测量绘图时间
• 减少不必要的绘图操作
• 考虑使用缓存（QPixmapCache）

9.3、 坐标计算错误

• 使用 qDebug() 输出坐标值
• 绘制参考线辅助调试
• 注意坐标系变换的顺序

总结

QPainter 是 Qt 图形系统的核心，掌握它的使用对于开发高质量的 GUI 应用至关重要。通过本项目的实践，您应该能够理解如何：