Qt汽车仪表控件（一）

临近春节，单位工作比较空闲。所以拜读了一遍大佬们的控件代码。同时也想着自己制作一个。

在网上找到了一个汽车电子仪表的图片。感觉实现及效果都相对可以。所以花了半天时间写了个demo。后续还会增加功能，及尽可能完善该图功能，先上图。

                                                                       图片来源于网络，如有侵权请联系删除

如图左侧红圈内部分，主表盘分为三层圆环区域。暂且由外到内称为外层光晕、外层渐变及内层渐变。总体来说该三层区域均可用QRadialGradient结合QPainterPath来实现，并具备一定的透明效果。以内层渐变为例，代码如下。

void zxfs::drawInnerGradient(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);

    QPainterPath smallCircle;
    QPainterPath bigCircle;

    float radius = 65;
    smallCircle.addEllipse(-radius, -radius, radius * 2, radius * 2);
    radius += 11.25f;
    bigCircle.addEllipse(-radius, -radius, radius * 2, radius * 2);

    //大圆抛去小圆部分
    QPainterPath gradientPath = bigCircle - smallCircle;
    QRadialGradient gradient(0, 0, radius, 0, 0);
    //gradient.setSpread(QGradient::ReflectSpread);

    gradient.setColorAt(0.7, QColor(50, 154, 255, 180));
    gradient.setColorAt(1, QColor(50, 154, 255, 70));
    painter->setBrush(gradient);
    painter->drawPath(gradientPath);

    painter->restore();
}

在实现这个控件中，感觉最难的部分为刻度值的绘制。不过已有大佬们贴出核心代码。此处省略介绍。有兴趣的小伙伴请点击大佬传送门https://zhuanlan.zhihu.com/p/63062099

最后贴出该控件实现效果：

观看到某些仪表盘带有翻转的动画效果。现在使用下行函数代替。

void QPainter::shear(qreal sh, qreal sv)

并进行了动画添加，实现效果如下：

 

代码传送门：https://download.csdn.net/download/wojiaoanchao/12517723

近期将慢慢扩充到网络图片所示样式。（原谅我不能很好的还原，颜色及透明度真的太难调了o(╯□╰)o）

                                                                                                                                                                        未完待续 2020-06-12