本文已参与「新人创作礼」活动，一起开启掘金创作之路。

HMI-31-【运动模式】解决音乐模块图片显示问题

上一篇中，我们基本实现了音乐模块的布局显示，但是留了个小尾巴，就是图片显示，这个模块中，图片不是方正的，而是有透视的，但是呢，Qt的图像显示显示，我还没有研究那么深入，所以目前只能是像，但是肯定不是真真的透视。我是利用遮罩来实现的，其实还是平面的图片，仅仅是用了一个透视的图片模版来覆盖一下。

HMI-31-【运动模式】解决音乐模块图片显示问题新建图片模块并实现窗口不规则显示目前进度第一阶段成果展示

关键字： HMI、透视图形、遮罩、setMask、Qt

新建图片模块并实现窗口不规则显示

这里为了实现这个透视效果，需要两部分来合作实现，第一是窗口不规则显示，一个是给图像设置遮罩。所以需要新建一个QWidget来实现。布局上，用一个lable来实现不规则窗口背景，和面的窗口显示就是按照这个背景的图像来实现。

代码

this->setAttribute(Qt::WA_TranslucentBackground);

设置图像遮罩代码：

    QPixmap pix;
    pix.load(":/Sport/Resources/MeterDisplay/Sport/MDSR/Music/mask.png");
    ui->label_back->setMask(pix.mask());

在想外引一个接口，即可实现图片更新，代码如下

/**
 * @brief MDS_Right_Music_PicMask::setPicUrl
 * @param url
 * 设置图片url
 */
void MDS_Right_Music_PicMask::setPicUrl(QString url)
{
    ui->label_back->setStyleSheet(QString("border-image: url(%1);").arg(url));
    ui->label_back->update();
}

目前进度

第一阶段成果展示

目前以完成HUD界面及接口开发，液晶仪表舒适模式开发。展示如下：

[video(video-ArCvRvBQ-1642664938100)(type-bilibili)(url-player.bilibili.com/player.html…img-blog.csdnimg.cn/img_convert…全网最帅Qt开发吉利汽车仪表)]

说明：

本项目中所使借鉴原型来自：[吉利] 博瑞GE | 仪表HMI设计、吉利汽车HMI项目。

设计图的所有权和解释权都归吉利汽车所有。

本项目所有资源文件均有**打不死的小海**复刻制作。

本项目代码暂时不会开源，有需要的源码的可与我联系，左上角二维码加微信。

本项目仅限学习交流、禁止商业使用。