Qt自定义控件--仪表盘

一、前言

本篇博客是学习的大佬feiyangqingyun的博客，博客链接，有兴趣的可以去看一下。通过本次学习，让我对Qt的绘图技巧有了很大的提升，万分感谢大佬：飞扬青云

二、效果展示

三、绘图过程详解

我把仪表盘划分为五个部分，分别表盘框架、刻度线、刻度值、数值、指针，下面开始分步讲解。

2.1、表盘框架

表盘框架分为六部分：表盘框架外圆、表盘框架中间圆、表盘框架彩环、表盘框架内圆和中心红圆环和中心圆，具体怎么绘制在此不做过多赘述，不懂就去研究一下Qt的绘图原理。
值得注意的技巧:

坐标系平移painter->translate(width()/2,height()/2)；
等比例缩放painter->scale(side / 200.0, side / 200.0)；

2.2、刻度线

刻度绘制有个很骚的操作，旋转坐标系painter.rotate(Angle)，Qt的坐标系是x轴正方向向右，y轴正方向向下，例如我要从左开始绘制刻度线，直接将坐标系旋转135°，然后每画一个刻度旋转一个刻度对应的角度间隔(270°/(100-0))。

2.3、刻度值

绘制刻度值不采用旋转坐标的方法，采用极坐标计算坐标。初始坐标系为水平向右为x轴正方向，垂直向下为y轴正方向，现在要从0开始绘制，极坐标是逆时针为正反向，所以0处的弧度为(360°-135°) * (180 / PI)，刻度跨度总共是270°，所以每个大刻度值之间的角度间隔是270°/10，相应地也转化为弧度制。然后使用三角公式x=r * cosa，y=r * sina，cosa和sina是值对应的角度的弧度制。但是这样还不够，因为绘制文字是在一个矩形框里面绘制，如果我们按算出来的x和y进行绘制，那这个x和y对应矩形框的左上角坐标，所以绘制出来的效果会对不齐。为了解决这个问题，首先我们需要修改字体的像素值，然后计算出值（对应的矩形框）的宽度和高度，然后在实际绘制时，对计算出的x和y做一个偏移处理（例如，宽、高的一半），这样画出来的刻度效果会好很多。

2.3、数值

数值直接绘制在中心即可。

2.4、指针

指针是由一个细长的等边三角形组成的，绘制指针依然采用旋转坐标系的方法绘制。从0开始绘制，首先旋转45°，取三个点（-5,0）、（5,0）、（0,radius），也就是在x轴左右取一对对称点，在y轴上取一个点，然后根据当前值计算旋转坐标系的角度，指针就会随之移动。具体绘制时，可将三个点放在一个集合里，然后进行绘制即可。

四、锦上添花

这一步是给仪表盘加一个反光的效果，产生一种真实感。原理是用一个小圆去减掉大圆，然后用渐变画刷绘制。