背景：
项目需要，可能需要做一些仪表显示。此篇除了介绍实现方法，还要说明心路历程。对我而言，重要的是心理，而不是技术。写下来也是自勉。
本人起初心里是比较抵触的，从业20多年了，深知所谓界面，实际上最根本还是代码实现的，操作系统层面多少年来一步步发展更新，是靠不断封装演变来的。所谓的可视化开发，主要还是靠ide提供的插件控件，通常只是应用。如果要按照自己的想法做个什么，那就是绘图机制，把代码变成图不用想就知道麻烦。基于这种心理，就是再说qt可以做得很炫，个人表示一看就够那种，根本看不进去。
终究为了活下去，所以要保住工作，也是对技术的不服输，所以不忙时打开qt示例，看它的文档。其实看过很多遍了，主要是看不进去。终于要善于提炼代码，看它的主要部分，缩小规模，然后研读手册，必要时看看别人怎么说的，逐个尝试，最后形成自己的总结，就学会了。
下面只介绍干货。
用法总结：
所谓绘图机制，肯定用到paintEvent函数，每一个能看到的窗体都是使用操作系统的重绘机制显示的。说人话就是，绘图的过程要写在paintEvent函数里，只要做了更新显示操作，记着调用update函数，它会调用paintEvent函数重绘界面。
qt绘图就一个QPainter，所有事都是它干的。QPen用于设置边框边线，QBrush用于设置填充。
painter画任何东西都是有个draw***函数。
画任何东西都基于坐标系，所以要先操作坐标系，再画。比如想画仪表盘刻度，设定好间隔（循环），转一次坐标系，画一个短线，最后转完一圈，也就画了一圈刻度。
painter就是画画，肯定后画的覆盖先画的，跟图层似的。
因为能旋转坐标系，所以要记住前后的坐标系状态，所以前面调用QPainter::save()，最后调用QPainter::restore()。比如画仪表，开始画背景是正常坐标系，接着通过旋转坐标系画刻度，最后要在正常坐标系下画表轴或者其它东西。这中间，旋转坐标系那部分，就需要暂存painter状态，画完这部分再恢复。
具体下面例子说明。
下面无论我画什么，都不再贴mainwindow代码了，没有必要，每个仪表都是一个类，使用时，在界面画一个label，提升为这个类即可。
手绘仪表盘：
思路是：
先画个黑色矩形当背景；
再旋转坐标系画刻度；
通过一个全局的成员变量值，作为指针旋转角度值，通过旋转坐标系把指针画到相应位置；
最后画一个转轴盖住指针（其实也可以把指针别画那么长，留出圆心位置即可）。
我鸟语不行，注释部分，看官您忽略就好。至于表芯转轴，你们说叫hand heart还是center？要不咱别较真的了，主要看代码。
guage_watertemp.h
/**************************************************************************************************** File name: guage_watertemp.h (Guage_WaterTemp)** Created by: Henrick.Nie at 2024-9-8** Used for: The car water temprature guage.**************************************************************************************************/
#ifndef GUAGE_WATERTEMP_H
#define GUAGE_WATERTEMP_H#include <QLabel>
#include <QPainter>
#include <QDebug>class Guage_WaterTemp : public QLabel
{Q_OBJECTpublic:explicit Guage_WaterTemp(QWidget *parent = nullptr);void f_SetTemp(const qreal &realTemp);private:qreal m_realTemp, m_realMin = 25, m_realMax = 155;void paintEvent(QPaintEvent *event);void f_Draw(QPainter *p);
};#endif // GUAGE_WATERTEMP_H
guage_watertemp.cpp
#include "guage_watertemp.h"Guage_WaterTemp::Guage_WaterTemp(QWidget *parent) :QLabel(parent)
{
}
void Guage_WaterTemp::paintEvent(QPaintEvent *event)
{QLabel::paintEvent(event);QPainter painter(this);f_Draw(&painter);
}
void Guage_WaterTemp::f_Draw(QPainter *p)
{QColor colorHand = QColor(Qt::red);//Init the size data.int iHeartSize = width() / 5;int iX0 = width() / 2, iY0 = height() - iHeartSize;int iBackWidth = width(), iBackHeight = width() / 2 + iHeartSize * 1.5 ;int iBackLeft = 0 - iBackWidth / 2, iBackTop = 0 - iBackWidth / 2 - iHeartSize / 2;int iMarkSize = iBackWidth / 40, iMarklength = iBackWidth / 20;int iHandSize = iBackWidth / 25, iHandLeft = iBackLeft + width() / 20, iHandLength = iBackWidth / 2 - iBackWidth / 20;int iText30Left = iBackLeft + width() / 28, iText30Top = 0 - width() / 15;int iText90Left = 0 - width() / 18, iText90Top = 0 - width() / 4;int iText150Left = width() / 3.5, iText150Top = iText30Top;//Init the origin.p->setRenderHint(QPainter::Antialiasing);p->translate(iX0, iY0);//Draw the black rect as the background.p->setPen(Qt::NoPen);p->setBrush(QBrush(Qt::black));p->drawRect(iBackLeft, iBackTop, iBackWidth, iBackHeight);//Draw the hand heart on the origin.p->setPen(QPen(QBrush(colorHand), iHeartSize, Qt::SolidLine, Qt::RoundCap));p->drawPoint(0, 0);//Draw the mark. (From 30 degrees to 150 degrees, 150-30=120, 120/10=12)p->save();p->rotate(30);for(int i = 30; i <= 150; ++i){QBrush brush = (i < 140) ? QBrush(Qt::white) : QBrush(Qt::red);p->setPen(QPen(brush, iMarkSize));p->drawPoint(iBackLeft, 0);p->rotate(1);}p->restore();QList<int> iList_Big = { 30, 90, 150 };p->save();p->rotate(30);for (int i = 30; i <= 150; i += 12){int iSize = iList_Big.contains(i) ? iMarkSize * 2 : iMarkSize;int iLeft = iList_Big.contains(i) ? iBackLeft + iMarkSize / 2 : iBackLeft;int iLength = iList_Big.contains(i) ? iMarklength + 10 : iMarklength;QBrush brush = (i < 130) ? QBrush(Qt::white) : QBrush(Qt::red);p->setPen(QPen(brush, iSize));p->drawLine(iLeft, 0, iLeft + iLength, 0);p->rotate(12);}p->restore();//Draw the mark text.p->setFont(QFont("", width() / 10));p->setPen(QPen(QBrush(Qt::white), width() / 18));p->drawText(iText30Left, iText30Top, "30");p->drawText(iText90Left, iText90Top, "90");p->drawText(iText150Left, iText150Top, "150");//Draw hands.p->save();p->setPen(QPen(QBrush(colorHand), iHandSize, Qt::SolidLine, Qt::RoundCap));if (m_realTemp < m_realMin){m_realTemp = m_realMin;}if (m_realTemp > m_realMax){m_realTemp = m_realMax;}p->rotate(m_realTemp);p->drawLine(iHandLeft, 0, iHandLeft + iHandLength, 0);p->restore();p->end();
}
void Guage_WaterTemp::f_SetTemp(const qreal &realTemp)
{m_realTemp = realTemp;update();
}
效果：
其实我是仿照大众polo劲情的水温表画的。至于指针，既然是旋转肯定是角度。看到表盘的样式时，要大致估计一下，最左侧和左右侧的刻度大概是坐标轴上的多少度。算一下它的跨度，和实际需要的水温数值要有个转换。比方说，这个水温表的刻度刚好是水温和角度一一对应，所以不用转换。
图片仪表盘：
上面看到效果后会很有成就感，但要把仪表盘画得逼真可不容易，还要考虑缩放和字体，细节太多。因此有了这种方法，从网上找图片素材，自己加工仪表盘。直接先把图片画上去当背景，然后代码只控制表针即可。以后修改背景表盘，photoshop修图即可。
先看我找的素材：
再看我修好的效果：
上代码：
polo_base.h
/**************************************************************************************************** File name: polo_baes.h (Polo_Base)** Created by: Henrick.Nie at 2024-9-9** Used for: The base class of the polo guage.**************************************************************************************************/#ifndef POLO_BASE_H
#define POLO_BASE_H#include <QLabel>
#include <QPainter>
#include <QDebug>class Polo_Base : public QLabel
{Q_OBJECT
public:explicit Polo_Base(QWidget *parent = nullptr);protected:QString m_sPicPath;virtual void f_SetValue(const qreal &realValue);private:qreal m_realDegree, m_realMin = 40, m_realMax = 140;void paintEvent(QPaintEvent *event);void f_Draw(QPainter *p);
};#endif // POLO_BASE_H
polo_base.cpp
#include "polo_base.h"Polo_Base::Polo_Base(QWidget *parent) :QLabel(parent)
{}
void Polo_Base::paintEvent(QPaintEvent *event)
{QLabel::paintEvent(event);QPainter painter(this);f_Draw(&painter);
}
void Polo_Base::f_Draw(QPainter *p)
{QColor colorHand = QColor(Qt::red);//Init the origin.int iX0 = width() / 2, iY0 = height() - width() / 4;p->setRenderHint(QPainter::Antialiasing);p->translate(iX0, iY0);//Draw the background picture.QPixmap pic(m_sPicPath);int iPicWidth = width(), iPicHeight = width() * pic.height() / pic.width();int iLeft = 0 - iPicWidth / 2, iTop = 0 - iPicHeight + width() / 4;p->drawPixmap(iLeft, iTop, width(), width() * pic.height() / pic.width(), pic);//Draw hands.int iHandSize = width() / 25, iHandLeft = iLeft - width() / 15, iHandLength = width() / 2 - width() / 20;p->save();p->setPen(QPen(QBrush(colorHand), iHandSize, Qt::SolidLine, Qt::RoundCap));if (m_realDegree < m_realMin){m_realDegree = m_realMin;}if (m_realDegree > m_realMax){m_realDegree = m_realMax;}p->rotate(m_realDegree);p->drawLine(iHandLeft, 0, iHandLeft + iHandLength, 0);p->restore();//Draw the hand heart on the origin.int iHeartSize = width() / 4;p->setPen(QPen(QBrush(QColor(Qt::darkGray)), iHeartSize, Qt::SolidLine, Qt::RoundCap));p->drawPoint(0, 0);p->end();
}
void Polo_Base::f_SetValue(const qreal &realValue)
{m_realDegree = realValue;update();
}polo_watertemp.h
/**************************************************************************************************** File name: polo_watertemp.h (Polo_WaterTemp)** Created by: Henrick.Nie at 2024-9-9** Used for: The water temprature guage of polo.**************************************************************************************************/#ifndef POLO_WATERTEMP_H
#define POLO_WATERTEMP_H#include "polo_base.h"class Polo_WaterTemp : public Polo_Base
{Q_OBJECT
public:explicit Polo_WaterTemp(QWidget *parent = nullptr);void f_SetValue(const qreal &realValue) override;
};#endif // POLO_WATERTEMP_H
polo_watertemp.cpp
#include "polo_watertemp.h"Polo_WaterTemp::Polo_WaterTemp(QWidget *parent) :Polo_Base(parent)
{m_sPicPath = ":/images/polo_watertemp.jpg";
}
void Polo_WaterTemp::f_SetValue(const qreal &realValue)
{//The given water temprature value, it equals the degrees.Polo_Base::f_SetValue(realValue);
}
polo_fuel.h
/**************************************************************************************************** File name: polo_fuel.h (Polo_Fuel)** Created by: Henrick.Nie at 2024-9-9** Used for: The fuel guage of polo.**************************************************************************************************/#ifndef POLO_FUEL_H
#define POLO_FUEL_H#include "polo_base.h"class Polo_Fuel : public Polo_Base
{Q_OBJECT
public:explicit Polo_Fuel(QWidget *parent = nullptr);void f_SetValue(const qreal &realValue) override;
};#endif // POLO_FUEL_H
polo_fuel.cpp
#include "polo_fuel.h"Polo_Fuel::Polo_Fuel(QWidget *parent) :Polo_Base(parent)
{m_sPicPath = ":/images/polo_fuel.jpg";
}
void Polo_Fuel::f_SetValue(const qreal &realValue)
{Polo_Base::f_SetValue(40 + realValue * 2.2);
}燃料表这个要注意数值换算了。下面转速表也是。
tachometer.h
/**************************************************************************************************** File name: tachometer.h (TachoMeter)** Created by: Henrick.Nie at 2024-9-9**************************************************************************************************/#ifndef TACHOMETER_H
#define TACHOMETER_H#include <QLabel>
#include <QPainter>
#include <QDebug>class TachoMeter : public QLabel
{Q_OBJECT
public:explicit TachoMeter(QWidget *parent = nullptr);void f_SetValue(const qreal &realValue);private:qreal m_realValue = -45, m_realMin = -45, m_realMax = 225;void paintEvent(QPaintEvent *event);void f_Draw(QPainter* p);
};#endif // TACHOMETER_H
tachometer.cpp
#include "tachometer.h"TachoMeter::TachoMeter(QWidget *parent) :QLabel(parent)
{}
void TachoMeter::paintEvent(QPaintEvent *event)
{QLabel::paintEvent(event);QPainter painter(this);f_Draw(&painter);
}
void TachoMeter::f_Draw(QPainter *p)
{//Init the size data.int iSideSize = qMin(width(), height());int iX0 = width() / 2, iY0 = height() / 2;//Init the origin.p->setRenderHint(QPainter::Antialiasing);p->translate(iX0, iY0);//Draw the background.p->setPen(Qt::NoPen);p->setBrush(QBrush(Qt::black));p->drawRect(0 - width() / 2, 0 - height() / 2, width(), height());QPixmap pic(":/images/tacho1.jpg");int iLeft = 0 - iSideSize / 2, iTop = 0 - iSideSize / 2;p->drawPixmap(iLeft, iTop, iSideSize, iSideSize, pic);//Draw the hand.p->save();p->setPen(QPen(QBrush(Qt::red), iSideSize / 40, Qt::SolidLine, Qt::RoundCap));if (m_realValue < m_realMin){m_realValue = m_realMin;}if (m_realValue > m_realMax){m_realValue = m_realMax;}p->rotate(m_realValue);p->drawLine(0 - iSideSize / 2 + iSideSize / 20, 0, 0, 0);p->restore();//centerp->setPen(Qt::NoPen);p->setBrush(QBrush(QColor(Qt::darkGray)));p->drawEllipse(QPoint(0, 0), iSideSize / 20, iSideSize / 20);p->end();
}
void TachoMeter::f_SetValue(const qreal &realValue)
{//value: 0 to 800//degree: -45 to 225 (225-(-45))=270qreal realScale = 270.0 / 800.0; //per 10 rpmm_realValue = 0 - 45 + realValue * realScale;update();
}
效果：
效果解析：
上面效果图中，我在界面上放置了滑动条，实际操作时，可以改变滑块位置，直接看到仪表动作。
本文完。