AI 助理
备案控制台
开发者社区 云计算 文章 正文

Qt [GC9-13]：HUD-转向灯、速度表、背景透明处理

2021-12-15 179
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Qt [GC9-13]：HUD-转向灯、速度表、背景透明处理

image.png

image.png

先看下目前的运行效果，这篇主要说一下转向灯、速度表和背景透明的实现。



HUD在车上的使用场景就是投影在汽车前风挡玻璃上面，所以背景一定要做成空的。但是作为显示器，我先应该是黑色吧，这里我就模拟了我们眼睛看到的画面，至于显示设备上面的，应该是黑色，或者根据每个玻璃上的参数不同调整下背景颜色，影响不大。代码就两行，这里我做了隐藏标题处理，所以就是三行了，如下

    this->setWindowFlag(Qt::FramelessWindowHint);       //隐藏标题栏
    this->setWindowOpacity(1);
    this->setAttribute(Qt::WA_TranslucentBackground);

转向灯，属于汽车灯光组成的一部分，主要就是告诉别人我要怎么走，左拐还是右拐或者我车怎么滴了，不能走了，警示后车即双闪。大致流程如下图所示。

image.png

这个图看着有点复杂，其实代码是不怎么复杂的。

说先定义三个变量，用来表示左转、右转和警告即双闪。

#define TURN_LEFT 1 //左转向灯 
#define TURN_RIGHT 2 //右转向灯 
#define WARNING 3 //双闪

其实这个不是必要的，只是为了后面使用方便。

初始化我们的定时器并吧要干活的分配给它

    timer_TurnLeftLight = new QTimer;
    connect(timer_TurnLeftLight,&QTimer::timeout,this,[=](){
        if(ui->label_turnLight_L->isHidden())
        {
            ui->label_turnLight_L->show();
        }
        else
        {
            ui->label_turnLight_L->hide();
        }
    });
    timer_TurnRightLight = new QTimer;
    connect(timer_TurnRightLight,&QTimer::timeout,this,[=](){
        if(ui->label_turnLight_R->isHidden())
        {
            ui->label_turnLight_R->show();
        }
        else
        {
            ui->label_turnLight_R->hide();
        }
    });

这里我没有单独另写槽函数，而是用了lambda表达式，详细可以自行百度这个东东。

下面就是主要的接口了，

void HUD::set_TurnLight(int signalType, bool isOn)
{
    switch (signalType) {
    case TURN_LEFT:
    {
        if(isOn)
        {
            timer_TurnLeftLight->start(1000);
        }
        else
        {
            timer_TurnLeftLight->stop();
            ui->label_turnLight_L->hide();
        }
        break;
    }
    case TURN_RIGHT:
    {
        if(isOn)
        {
            timer_TurnRightLight->start(1000);
        }
        else
        {
            timer_TurnRightLight->stop();
            ui->label_turnLight_R->hide();
        }
        break;
    }
    case WARNING:
    {
        if(isOn)
        {
            timer_TurnLeftLight->start(1000);
            timer_TurnRightLight->start(1000);
        }
        else
        {
            timer_TurnLeftLight->stop();
            ui->label_turnLight_L->hide();
            timer_TurnRightLight->stop();
            ui->label_turnLight_R->hide();
        }
        break;
    }
    default:
        break;
    }
}

控制定时器的开关和时间就好了。

速度表其实更好实现了，我仔细观察了我车的HUD上面的速度表，三位数 单位km/h 三位数足够了，哈哈，看样子他的样子和8位数码管显示的样子差不多，这里我就百度了8为数码管的样子，仿照做了数字。

实现这个东西的大致想法如下

image.png

image.png

上图中布局就是我的数字，就一个QLabel，完了根据数据接口的数字来给这个Lebel分配不同的资源。实现代码如下

void HUD_Number::set_Number(int temp)
{
    switch (temp) {
    case 0:
        ui->label_hudNumber->setGeometry(1,0,85,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/0.png)");
        break;
    case 1:
        ui->label_hudNumber->setGeometry(29,5,57,113);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/1.png)");
        break;
    case 2:
        ui->label_hudNumber->setGeometry(0,0,86,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/2.png)");
        break;
    case 3:
        ui->label_hudNumber->setGeometry(6,0,80,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/3.png)");
        break;
    case 4:
        ui->label_hudNumber->setGeometry(14,4,72,114);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/4.png)");
        break;
    case 5:
        ui->label_hudNumber->setGeometry(6,0,77,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/5.png)");
        break;
    case 6:
        ui->label_hudNumber->setGeometry(0,0,83,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/6.png)");
        break;
    case 7:
        ui->label_hudNumber->setGeometry(31,0,55,121);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/7.png)");
        break;
    case 8:
        ui->label_hudNumber->setGeometry(0,0,86,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/8.png)");
        break;
    case 9:
        ui->label_hudNumber->setGeometry(6,0,79,122);
        ui->label_hudNumber->setStyleSheet("border-image:url(:/HUD/Resources/Images/HUD/number/9.png)");
        break;
    default:
        break;
    }
}

在上面的代码中，可以看到，我每次给label分配资源的时候，都需要重新设置label的位置和大小，这就是因为我开始制作素材是没有注意这个问题。大家在后面制作素材是可以注意。


那么我的这一个数字表就做好了，怎么把呀做成三个了，这就到了真真的设置速度的接口了，我吧这个实现方式写在了设置速度表的接口中。如下

void HUD::set_Current_Speed(int temp)
{
    if(temp <10)
    {
        number_2->hide();
        number_3->hide();
        number_1->setGeometry(157,70,86,122);
        number_1->set_Number(temp);
        ui->label_Kmh->setGeometry(156,195,88,22);
    }
    else if(temp>=10 && temp<100)
    {
        number_2->show();
        number_3->hide();
        number_1->setGeometry(200,70,86,122);
        number_2->setGeometry(114,70,86,122);
        number_1->set_Number(temp%10);
        number_2->set_Number(temp/10);
        ui->label_Kmh->setGeometry(199,195,88,22);
    }
    else
    {
        number_2->show();
        number_3->show();
        number_1->setGeometry(243,70,86,122);
        number_2->setGeometry(157,70,86,122);
        number_3->setGeometry(71,70,86,122);
        number_1->set_Number(temp%10);
        number_2->set_Number((temp/10)%10);
        number_3->set_Number(temp/100);
        ui->label_Kmh->setGeometry(240,195,88,22);
    }
}

好了，这边篇就完事了

image.png

DreamLife
目录
相关文章
技术小甜
|
开发工具 iOS开发 git
iOS CAShapeLayer、CADisplayLink 实现波浪动画效果
技术小甜
1468 0
咖喱酱_zero
|
图形学
unity3d UI特效处理，image置灰shader
新建材质，材质指定该shader，然后将材质球拖拽到image上面，效果就显示出来了 图片.png Shader "UI/ImageGreyShader" { Properties { [PerRendere...
咖喱酱_zero
3283 0
梦笔生花伟
|
4月前
QT设置widget背景图片
该内容介绍如何在Qt中为控件添加背景图片。主要方法包括：1) 在样式表中使用`border-image`属性指定控件及其背景图片；2) 使用调色板`QPalette`设置图片，但可能导致窗口显示不下；3) 在`paintEvent`中绘制图片，适合自定义绘图但不适用于子窗口；4) 通过覆盖一个大小与窗口相同的`QLabel`来设置背景图片，可实现动态背景。推荐使用样式表设置背景，简单高效且适合子窗口。
梦笔生花伟
270 3
测个der
|
开发工具
Pyside6-第十二篇-QSlider滑动条
Pyside6-第十二篇-QSlider滑动条
测个der
434 0
人才程序员
|
API
Qt之滑动条和进度条(QSlider、QProgressBar)
Qt之滑动条和进度条(QSlider、QProgressBar)
人才程序员
1786 1
茶底世界之下
|
API iOS开发 Perl
iOS UIButton倒计时、指示器、粒子效果
iOS UIButton倒计时、指示器、粒子效果
茶底世界之下
163 0
iOS UIButton倒计时、指示器、粒子效果
游客fcvboot535try
|
数据库 C++
Qt实现程序启动动画
Qt实现程序启动动画
游客fcvboot535try
254 0
恬静的小魔龙Unity
|
图形学
实现圆形进度条（Unity3D）
今天分享一个制作圆形进度条的方法，原教程比较繁琐，这里给精简一下，更适合于新手
恬静的小魔龙Unity
544 0
DreamLife
Qt [GC9-10]：HUD介绍
Qt [GC9-10]：HUD介绍
DreamLife
186 0
Qt [GC9-10]：HUD介绍
DS小龙哥
QT软件开发: QGraphicsView设置无边框背景透明
QT软件开发: QGraphicsView设置无边框背景透明
DS小龙哥
689 0
QT软件开发: QGraphicsView设置无边框背景透明