Qt5.15/6.0 实战：用QPainter画个自定义仪表盘（附完整源码）

Qt5.15/6.0实战用QPainter打造工业级自定义仪表盘在工业控制、汽车电子和物联网设备的人机界面开发中仪表盘是最常见的可视化元素之一。不同于简单的进度条一个设计精良的仪表盘能够直观地展现关键指标的变化趋势同时提升产品的专业感和用户体验。本文将带你从零开始使用Qt的QPainter系统实现一个可定制的圆形仪表盘组件包含刻度线、指针动画和渐变背景等高级特性。1. 项目结构与基础准备首先创建一个名为GaugeWidget的Qt Widgets Application项目基类选择QWidget。这个自定义控件将完全通过QPainter绘制不依赖任何图片资源。// GaugeWidget.h #pragma once #include QWidget class GaugeWidget : public QWidget { Q_OBJECT public: explicit GaugeWidget(QWidget *parent nullptr); void setValue(double value); // 设置当前指针值 protected: void paintEvent(QPaintEvent *event) override; private: double m_currentValue 0; double m_minValue 0; double m_maxValue 100; };在实现文件中我们先搭建基本的绘制框架// GaugeWidget.cpp #include GaugeWidget.h #include QPainter #include QConicalGradient GaugeWidget::GaugeWidget(QWidget *parent) : QWidget(parent) {} void GaugeWidget::setValue(double value) { m_currentValue qBound(m_minValue, value, m_maxValue); update(); // 触发重绘 } void GaugeWidget::paintEvent(QPaintEvent *) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); // 开启抗锯齿 // 后续绘制代码将在这里添加 }2. 绘制仪表盘主体仪表盘的圆形主体需要精确计算绘制区域确保在不同尺寸下都能正确显示void GaugeWidget::paintEvent(QPaintEvent *) { // ... 前面的代码不变 const int margin 10; // 边距 QRectF gaugeRect rect().adjusted(margin, margin, -margin, -margin); qreal diameter qMin(gaugeRect.width(), gaugeRect.height()); gaugeRect.setSize(QSizeF(diameter, diameter)); gaugeRect.moveCenter(rect().center()); // 绘制背景圆环 QConicalGradient gradient(gaugeRect.center(), -90); gradient.setColorAt(0, QColor(50, 120, 200)); gradient.setColorAt(1, QColor(200, 80, 50)); painter.setPen(Qt::NoPen); painter.setBrush(gradient); painter.drawEllipse(gaugeRect); // 绘制中心白色圆盘 painter.setBrush(QColor(240, 240, 245)); painter.drawEllipse(gaugeRect.adjusted(diameter*0.15, diameter*0.15, -diameter*0.15, -diameter*0.15)); }关键参数说明参数说明推荐值margin控件边距10-20像素gradient渐变色设置根据应用场景调整中心圆盘比例占整个表盘的比例15%-20%3. 添加刻度系统专业的仪表盘需要精确的刻度标记包括主刻度和次刻度// 在paintEvent函数中继续添加 const int majorTickCount 10; // 主刻度数量 const int minorTicksPerMajor 5; // 每个主刻度间的次刻度数 QPen tickPen(QColor(220, 220, 220)); tickPen.setWidth(2); painter.setPen(tickPen); // 计算刻度参数 qreal outerRadius diameter/2; qreal innerRadius outerRadius * 0.85; qreal tickLength outerRadius * 0.1; for (int i 0; i majorTickCount; i) { qreal angle 180 (i * 180.0 / majorTickCount); // 180度范围 // 绘制主刻度 QPointF outerPoint gaugeRect.center() QPointF(cos(qDegreesToRadians(angle)) * innerRadius, -sin(qDegreesToRadians(angle)) * innerRadius); QPointF innerPoint gaugeRect.center() QPointF(cos(qDegreesToRadians(angle)) * (innerRadius - tickLength), -sin(qDegreesToRadians(angle)) * (innerRadius - tickLength)); painter.drawLine(outerPoint, innerPoint); // 绘制刻度值文本 if (i % 2 0) { // 每隔一个主刻度显示数值 qreal value m_minValue (m_maxValue - m_minValue) * i / majorTickCount; QPointF textPos gaugeRect.center() QPointF(cos(qDegreesToRadians(angle)) * (innerRadius - tickLength - 20), -sin(qDegreesToRadians(angle)) * (innerRadius - tickLength - 20)); painter.drawText(textPos, QString::number(value)); } // 绘制次刻度 if (i majorTickCount) { for (int j 1; j minorTicksPerMajor; j) { qreal minorAngle angle (j * 180.0 / (majorTickCount * minorTicksPerMajor)); QPointF minorOuter gaugeRect.center() QPointF(cos(qDegreesToRadians(minorAngle)) * innerRadius, -sin(qDegreesToRadians(minorAngle)) * innerRadius); QPointF minorInner gaugeRect.center() QPointF(cos(qDegreesToRadians(minorAngle)) * (innerRadius - tickLength/2), -sin(qDegreesToRadians(minorAngle)) * (innerRadius - tickLength/2)); painter.drawLine(minorOuter, minorInner); } } }4. 实现动态指针仪表盘的核心是能够响应数据变化的指针这里我们使用三角形来表示// 在paintEvent函数中继续添加 qreal needleAngle 180 (m_currentValue - m_minValue) / (m_maxValue - m_minValue) * 180; qreal needleLength innerRadius - tickLength - 10; // 指针多边形三角形 QPolygonF needle; needle gaugeRect.center() gaugeRect.center() QPointF(cos(qDegreesToRadians(needleAngle 5)) * needleLength, -sin(qDegreesToRadians(needleAngle 5)) * needleLength/5) gaugeRect.center() QPointF(cos(qDegreesToRadians(needleAngle - 5)) * needleLength, -sin(qDegreesToRadians(needleAngle - 5)) * needleLength/5); // 绘制指针 painter.setBrush(QColor(220, 50, 50)); painter.setPen(QPen(QColor(180, 30, 30), 1)); painter.drawPolygon(needle); // 绘制指针中心圆点 painter.setBrush(QColor(50, 50, 50)); painter.drawEllipse(gaugeRect.center(), 5, 5);指针动画可以通过QPropertyAnimation实现平滑过渡// 在GaugeWidget.h中添加 #include QPropertyAnimation class GaugeWidget : public QWidget { // ... 其他代码不变 private: QPropertyAnimation *m_animation; }; // 在构造函数中初始化动画 GaugeWidget::GaugeWidget(QWidget *parent) : QWidget(parent) { m_animation new QPropertyAnimation(this, value); m_animation-setDuration(800); m_animation-setEasingCurve(QEasingCurve::OutQuad); } void GaugeWidget::setValue(double value) { if (m_animation-state() QPropertyAnimation::Running) { m_animation-stop(); } m_animation-setStartValue(m_currentValue); m_animation-setEndValue(qBound(m_minValue, value, m_maxValue)); m_animation-start(); }5. 高级美化与优化一个专业的仪表盘还需要考虑以下增强功能1. 值域颜色警示区// 在paintEvent中添加危险区域指示 QPainterPath dangerPath; dangerPath.moveTo(gaugeRect.center()); dangerPath.arcTo(gaugeRect, 180, 45); // 最后45度为红色警示区 painter.setPen(Qt::NoPen); painter.setBrush(QColor(200, 50, 50, 80)); painter.drawPath(dangerPath);2. 当前值数字显示// 在中心位置显示当前值 QFont valueFont painter.font(); valueFont.setPointSize(20); valueFont.setBold(true); painter.setFont(valueFont); painter.setPen(Qt::white); painter.drawText(gaugeRect, Qt::AlignCenter, QString::number(m_currentValue, f, 1));3. 性能优化技巧对于频繁更新的仪表盘可以设置setAttribute(Qt::WA_OpaquePaintEvent)复杂的静态元素可以预先渲染到QPixmap缓存使用QPainter::setClipRect()限制重绘区域6. 完整源码与扩展建议最终的GaugeWidget类可以直接嵌入到任何Qt界面中。使用时只需简单的setValue调用// 在主窗口中使用 GaugeWidget *gauge new GaugeWidget(this); gauge-setValue(75); // 设置初始值 // 定时更新示例 QTimer *timer new QTimer(this); connect(timer, QTimer::timeout, [gauge]() { static double val 0; val (val 100) ? 0 : val 1; gauge-setValue(val); }); timer-start(100);扩展功能建议添加多指针支持如最大/最小值指针实现不同主题风格切换支持触摸屏手势控制添加历史数据曲线显示这个自定义仪表盘组件展示了Qt 2D绘图系统的强大能力通过合理的几何计算和QPainter API的组合可以创建出各种专业级的可视化控件。相比使用图片资源矢量绘制的优势在于任意缩放不失真动态修改样式无需准备多套资源更小的内存占用更高的渲染性能在实际工业项目中这种技术已被广泛应用于SCADA系统、汽车仪表盘和医疗设备显示等专业领域。