HMI-29-【运动模式】实现转速表和中心油耗仪表
今天我要做的是中心的表，指针是速度表 油耗表显示在中心。
文章目录
- 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; one = temp0/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界面及接口开发，液晶仪表舒适模式开发。展示如下：
全网最帅Qt开发吉利汽车仪表
本项目中所使借鉴原型来自：[吉利] 博瑞GE | 仪表HMI设计、吉利汽车HMI项目。
设计图的所有权和解释权都归吉利汽车所有。
本项目所有资源文件均有**打不死的小海**复刻制作。
本项目代码暂时不会开源，有需要的源码的可与我联系，左上角二维码加微信。
本项目仅限学习交流、禁止商业使用。