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

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

[TOC]

关键字： 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();
}

目前进度

说明：

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

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

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

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

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