背景:
项目需要,可能需要做一些仪表显示。此篇除了介绍实现方法,还要说明心路历程。对我而言,重要的是心理,而不是技术。写下来也是自勉。
本人起初心里是比较抵触的,从业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劲情的水温表画的。至于指针,既然是旋转肯定是角度。看到表盘的样式时,要大致估计一下,最左侧和左右侧的刻度大概是坐标轴上的多少度。算一下它的跨度,和实际需要的水温数值要有个转换。比方说,这个水温表的刻度刚好是水温和角度一一对应,所以不用转换。
其实做到这一步时,完全可以在demo里让它显示真实的角度,这样这个demo就成了一个量角器,有助于后期调整精确度。
图片仪表盘:
上面看到效果后会很有成就感,但要把仪表盘画得逼真可不容易,还要考虑缩放和字体,细节太多。因此有了这种方法,从网上找图片素材,自己加工仪表盘。直接先把图片画上去当背景,然后代码只控制表针即可。以后修改背景表盘,photoshop修图即可。
后期又做了小修改,因为图片作为资源文件,每个人安排的路径可能不同,通用起见,需要调用f_Init函数先初始化路径前缀。
先看我找的素材:
再看我修好的效果:
上代码:
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.** Using method:**** Firstly, a image resource path is required.**** obj->f_Init(":/images/");****************************************************************************************************/#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);inline virtual void f_Init(const QString &sRcPathPrefix) = 0;inline qreal f_GetDegrees() const { return m_realDegrees; }protected:inline void f_SetBack(const QString &sFileName) { m_sPicPath = sFileName; }virtual void f_SetValue(const qreal &realValue);private:QString m_sPicPath;qreal m_realDegrees, 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_realDegrees < m_realMin){m_realDegrees = m_realMin;}if (m_realDegrees > m_realMax){m_realDegrees = m_realMax;}p->rotate(m_realDegrees);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_realDegrees = 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.** Using method:**** Firstly, a image resource path is required.**** obj->f_Init(":/images/");****************************************************************************************************/#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_Init(const QString &sRcPathPrefix) override;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)
{}
void Polo_WaterTemp::f_Init(const QString &sRcPathPrefix)
{f_SetBack(sRcPathPrefix + "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.** Using method:**** Firstly, a image resource path is required.**** obj->f_Init(":/images/");****************************************************************************************************/#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_Init(const QString &sRcPathPrefix) override;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)
{}
void Polo_Fuel::f_Init(const QString &sRcPathPrefix)
{f_SetBack(sRcPathPrefix + "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** Using method:**** Firstly, a image resource path is required.**** obj->f_Init(":/images/");****************************************************************************************************/#ifndef TACHOMETER_H
#define TACHOMETER_H#include <QLabel>
#include <QPainter>
#include <QDebug>class TachoMeter : public QLabel
{Q_OBJECT
public:explicit TachoMeter(QWidget *parent = nullptr);inline void f_Init(const QString &sRcPathPrefix) { m_sRcPathPrefix = sRcPathPrefix; }void f_SetValue(const qreal &realValue);inline qreal f_GetDegrees() const { return m_realDegrees; }private:QString m_sRcPathPrefix;qreal m_realDegrees = -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(m_sRcPathPrefix + "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_realDegrees < m_realMin){m_realDegrees = m_realMin;}if (m_realDegrees > m_realMax){m_realDegrees = m_realMax;}p->rotate(m_realDegrees);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 8000//degree: -45 to 225 (225-(-45))=270, -41/225/qreal realScale = 266.0 / 8000.0; //per 1 rpmm_realDegrees = 0 - 45 + realValue * realScale;update();
}
效果:
效果解析:
上面效果图中,我在界面上放置了滑动条,实际操作时,可以改变滑块位置,直接看到仪表动作。
警告灯:
在上述基础上,还可以使用label的setmovie函数,播放一些动态的gif图片。以实现警告灯的效果。
label_movie.h
/**************************************************************************************************** File name: label_movie.h (Label_Movie)** Created by: Henrick.Nie at 2024-9-10** Using method:**** Firstly, a image resource path is required.**** obj->f_Init(":/images/");****************************************************************************************************/#ifndef LABEL_MOVIE_H
#define LABEL_MOVIE_H#include <QLabel>
#include <QPainter>
#include <QMovie>
#include <QDebug>class Label_Movie : public QLabel
{Q_OBJECT
public:explicit Label_Movie(QWidget *parent = nullptr);inline void f_Init(const QString &sRcPathPrefix) { m_sRcPathPrefix = sRcPathPrefix; }void f_SetJpg(const QString &sFileName);void f_SetGif(const QString &sFileName);private:QString m_sRcPathPrefix;QMovie m_movie;
};#endif // LABEL_MOVIE_H
label_movie.cpp
#include "label_movie.h"Label_Movie::Label_Movie(QWidget *parent) :QLabel(parent)
{}
void Label_Movie::f_SetJpg(const QString &sFileName)
{this->setPixmap(QPixmap(m_sRcPathPrefix + sFileName));
}
void Label_Movie::f_SetGif(const QString &sFileName)
{m_movie.stop();m_movie.setFileName(m_sRcPathPrefix + sFileName);this->setMovie(&m_movie);m_movie.start();
}
之所以要包装一个label,因为qt手册提到ownership,也许qt这样处理有其它用意,但对于本次情况,每次单独处理不方便。
[slot] void QLabel::setMovie(QMovie *movie)
Sets the label contents to movie. Any previous content is cleared. The label does NOT take ownership of the movie.
The buddy shortcut, if any, is disabled.
效果如下:
当水温和油量到达警戒值时,自动亮起故障灯。
故障灯整合面板:
guage_warning.h
/**************************************************************************************************** File name: guage_warning.h (Guage_Warning)** Created by: Henrick.Nie at 2024-9-11** Used for: The warning light of the engine.** Using method:**** Firstly, a image resource path is required.**** obj->f_Init(":/images/");****************************************************************************************************/#ifndef GUAGE_WARNING_H
#define GUAGE_WARNING_H#include <QWidget>namespace Ui {
class Guage_Warning;
}class Guage_Warning : public QWidget
{Q_OBJECTpublic:explicit Guage_Warning(QWidget *parent = nullptr);~Guage_Warning();enum EWarningType { eNone, eWater, eOil, eFuel, eEngine, eBattery, eBrake };void f_Init(const QString &sRcPathPrefix);void f_SetStatus(const EWarningType &eType, const bool &bIsWarning);private:Ui::Guage_Warning *ui;QString m_sRcPathPrefix;EWarningType m_eType = eNone;};#endif // GUAGE_WARNING_H
guage_warning.cpp
#include "guage_warning.h"
#include "ui_guage_warning.h"Guage_Warning::Guage_Warning(QWidget *parent) :QWidget(parent),ui(new Ui::Guage_Warning)
{ui->setupUi(this);this->setStyleSheet("background: black;");ui->gridLayout->setSpacing(0);
}Guage_Warning::~Guage_Warning()
{delete ui;
}void Guage_Warning::f_Init(const QString &sRcPathPrefix)
{m_sRcPathPrefix = sRcPathPrefix;ui->labWater ->setPixmap(QPixmap(m_sRcPathPrefix + "warning_water.jpg"));ui->labOil ->setPixmap(QPixmap(m_sRcPathPrefix + "warning_oil.jpg"));ui->labFuel ->setPixmap(QPixmap(m_sRcPathPrefix + "warning_fuel.jpg"));ui->labEngine ->setPixmap(QPixmap(m_sRcPathPrefix + "warning_engine.jpg"));ui->labBattery->setPixmap(QPixmap(m_sRcPathPrefix + "warning_battery.jpg"));ui->labBrake ->setPixmap(QPixmap(m_sRcPathPrefix + "warning_brake.jpg"));
}
void Guage_Warning::f_SetStatus(const EWarningType &eType, const bool &bIsWarning)
{Label_Movie *lab;QString sJpg, sGif;switch (eType) {case eWater:lab = ui->labWater;sJpg = "warning_water.jpg";sGif = "warning_water.gif";break;case eOil:lab = ui->labOil;sJpg = "warning_oil.jpg";sGif = "warning_oil.gif";break;case eFuel:lab = ui->labFuel;sJpg = "warning_fuel.jpg";sGif = "warning_fuel.gif";break;case eEngine:lab = ui->labEngine;sJpg = "warning_engine.jpg";sGif = "warning_engine.gif";break;case eBattery:lab = ui->labBattery;sJpg = "warning_battery.jpg";sGif = "warning_battery.gif";break;case eBrake:lab = ui->labBrake;sJpg = "warning_brake.jpg";sGif = "warning_brake.gif";break;default:lab = nullptr;break;}if (nullptr == lab){return;}lab->f_Init(m_sRcPathPrefix);void (Label_Movie::*f_ptr)(const QString &sFileName) = bIsWarning ? &Label_Movie::f_SetGif : &Label_Movie::f_SetJpg;QString sPic = bIsWarning ? sGif : sJpg;(lab->*f_ptr)(sPic);
}
guage_warning.ui
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0"><class>Guage_Warning</class><widget class="QWidget" name="Guage_Warning"><property name="geometry"><rect><x>0</x><y>0</y><width>316</width><height>134</height></rect></property><property name="minimumSize"><size><width>129</width><height>66</height></size></property><property name="windowTitle"><string>Form</string></property><layout class="QGridLayout" name="gridLayout"><item row="0" column="0"><widget class="Label_Movie" name="labWater"><property name="text"><string>TextLabel</string></property><property name="alignment"><set>Qt::AlignCenter</set></property></widget></item><item row="0" column="1"><widget class="Label_Movie" name="labOil"><property name="text"><string>TextLabel</string></property><property name="alignment"><set>Qt::AlignCenter</set></property></widget></item><item row="0" column="2"><widget class="Label_Movie" name="labFuel"><property name="text"><string>TextLabel</string></property><property name="alignment"><set>Qt::AlignCenter</set></property></widget></item><item row="1" column="0"><widget class="Label_Movie" name="labEngine"><property name="text"><string>TextLabel</string></property><property name="alignment"><set>Qt::AlignCenter</set></property></widget></item><item row="1" column="1"><widget class="Label_Movie" name="labBattery"><property name="text"><string>TextLabel</string></property><property name="alignment"><set>Qt::AlignCenter</set></property></widget></item><item row="1" column="2"><widget class="Label_Movie" name="labBrake"><property name="text"><string>TextLabel</string></property><property name="alignment"><set>Qt::AlignCenter</set></property></widget></item></layout></widget><customwidgets><customwidget><class>Label_Movie</class><extends>QLabel</extends><header>label_movie.h</header></customwidget></customwidgets><resources/><connections/>
</ui>
使用的时候更简洁:
void MainWindow::on_sbWaterTemp_valueChanged(int value)
{ui->lab_WaterTemp->f_SetTemp(value);ui->lab_WaterTempPolo->f_SetValue(value);ui->wWarning->f_SetStatus(Guage_Warning::eWater, (value > 120));
}void MainWindow::on_sbWaterTemp_2_valueChanged(int value)
{on_sbWaterTemp_valueChanged(value);
}void MainWindow::on_sbFuel_valueChanged(int value)
{ui->lab_FuelPolo->f_SetValue(value);ui->wWarning->f_SetStatus(Guage_Warning::eFuel, (value < 10));
}void MainWindow::on_sbTacho_valueChanged(int value)
{ui->lab_Tacho->f_SetValue(value);
}
整合故障灯后效果如下:
本文完。