本文已参与「新人创作礼」活动，一起开启掘金创作之路。
HMI-29-【运动模式】转速表实现及中心油耗仪表实现
今天我要搞得就是中心的这个表，指针的是转速表 中心显示的油耗表。
关键字：
QPainter、number、Opacity、StyleSheet、Qt
实现转速表
前面准备工作还是一样，从PS中导出需要的资源文件，并吧资源文件稍微加工下导入到工程中。转速表比速度实现要稍微简单一点，因为这就是一个标准的圆，只需要绘制图片，控制旋转角度即可。代码如下：
void MDS_Center::drawPointer(int angle)
{
QPainter painter(ui->label_pointer);
painter.setRenderHint((QPainter::SmoothPixmapTransform));
painter.setRenderHint(QPainter::HighQualityAntialiasing);
painter.translate(337,337);
painter.save();
painter.rotate(angle);
painter.drawPixmap((-960),-360,1920,720,QPixmap(":/Sport/Resources/MeterDisplay/Sport/MDSC/pointer.png"));
painter.drawPixmap(-213,-213,426,426,QPixmap(":/Sport/Resources/MeterDisplay/Sport/MDSC/hu.png"));
painter.setOpacity(m_shadeOpacity);
painter.drawPixmap((-960),-360,1920,720,QPixmap(":/Sport/Resources/MeterDisplay/Sport/MDSC/shadow.png"));
painter.restore();
}
实现油耗表
油耗表和之前舒适模式下内容一直，都是解析数字，替换资源，这里直接贴上代码，代码如下：
void MDS_CenteerMiniDisplay::drawRAFE(double rafe)
{
int point,one,ten,temp;
temp = rafe*10;
point = temp%10;
one = temp%100/10;
ten = temp/100;
switch (point) {
default:
{
ui->label_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/0.png);}");
break;
}
case 0:
{
ui->label_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/0.png);}");
break;
}
case 1:
{
ui->label_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/1.png);}");
break;
}
case 2:
{
ui->label_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/2.png);}");
break;
}
case 3:
{
ui->label_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/3.png);}");
break;
}
case 4:
{
ui->label_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/4.png);}");
break;
}
case 5:
{
ui->label_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/5.png);}");
break;
}
case 6:
{
ui->label_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/6.png);}");
break;
}
case 7:
{
ui->label_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/7.png);}");
break;
}
case 8:
{
ui->label_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/8.png);}");
break;
}
case 9:
{
ui->label_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/9.png);}");
break;
}
}
switch (one) {
default:
{
ui->label_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/0.png);}");
break;
}
case 0:
{
ui->label_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/0.png);}");
break;
}
case 1:
{
ui->label_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/1.png);}");
break;
}
case 2:
{
ui->label_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/2.png);}");
break;
}
case 3:
{
ui->label_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/3.png);}");
break;
}
case 4:
{
ui->label_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/4.png);}");
break;
}
case 5:
{
ui->label_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/5.png);}");
break;
}
case 6:
{
ui->label_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/6.png);}");
break;
}
case 7:
{
ui->label_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/7.png);}");
break;
}
case 8:
{
ui->label_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/8.png);}");
break;
}
case 9:
{
ui->label_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/9.png);}");
break;
}
}
switch (ten) {
default:
{
ui->label_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/0.png);}");
break;
}
case 0:
{
ui->label_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/0.png);}");
break;
}
case 1:
{
ui->label_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/1.png);}");
break;
}
case 2:
{
ui->label_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/2.png);}");
break;
}
case 3:
{
ui->label_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/3.png);}");
break;
}
case 4:
{
ui->label_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/4.png);}");
break;
}
case 5:
{
ui->label_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/5.png);}");
break;
}
case 6:
{
ui->label_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/6.png);}");
break;
}
case 7:
{
ui->label_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/7.png);}");
break;
}
case 8:
{
ui->label_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/8.png);}");
break;
}
case 9:
{
ui->label_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSC/number/9.png);}");
break;
}
}
}
整体进度
目前已实现转速表，速度表和中心仪表中的油耗表实现，如下图：
第一阶段成果展示
目前以完成HUD界面及接口开发，液晶仪表舒适模式开发。展示如下：
[video(video-ArCvRvBQ-1642664938100)(type-bilibili)(url-player.bilibili.com/player.html…img-blog.csdnimg.cn/img_convert…全网最帅Qt开发吉利汽车仪表)] B站链接：www.bilibili.com/video/BV1qJ…
说明：
本项目中所使借鉴原型来自：[吉利] 博瑞GE | 仪表HMI设计、吉利汽车HMI项目。
设计图的所有权和解释权都归吉利汽车所有。
本项目所有资源文件均有**打不死的小海**复刻制作。
本项目代码暂时不会开源，有需要的源码的可与我联系，左上角二维码加微信。
本项目仅限学习交流、禁止商业使用。
