Qt [GC9-13]：HUD-转向灯、速度表、背景透明处理-阿里云开发者社区

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

2021-12-15 164

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

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

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

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

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

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

#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为数码管的样子，仿照做了数字。

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

上图中布局就是我的数字，就一个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);
    }
}

好了，这边篇就完事了

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

热门文章

最新文章

相关电子书

推荐镜像