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