学习QT之自定义控件入门学习#-仪表盘

由于本人目前也是在入门学习，此实例是学习了 BiLiBiLi up主：xieguimsn的视频教程，十分的感谢！写本文章的目的一来是理清一下学习思路和一些自己的理解，二来是方便以后自己查看。 原创作者视频教程中有源代码的下载方式，希望大家多多支持原创。

一、绘制过程详解

Qt绘图是通过重写paintEvent(QPaintEvent *event)来实现的，调用这个函数有两种方式：update()和repaint()，对绘图原理不清楚的同学，可以去翻看我的前一篇文章：Qt绘图原理详解。为了实时调用update()函数以实时调用绘制事件函数，我们定义一个定时器，定时刷新界面。绘制的步骤分以下几步：

1、窗体绘制准备

我们都知道，Qt的窗体是方形的，但是我们最终的仪表盘肯定是圆形的，所以在绘制之前我们要将窗体整个设置为透明，然后我们再在上面绘制，看起来的效果就好像控件窗体是圆形的了，其实它还是方形的。

2、绘制表盘

我们可以把表盘拆解一下，此处有两种拆解方案：

1. 先画最外层的圆并填充为灰色，再画中间的圆（刻度盘）并填充为黑色，最后画内层的圆也填充为灰色，之后再补上中心区域的红色小圆。

2. 先画最外层的圆并填充为灰色，然后再画一个黑色圆环，最后补上中心区域的红色小圆。

在这里我们采用方案1，因为这种方案较为简单。

3、绘制刻度

首先我们需要确定我们绘制刻度的区域是在哪一块，我们设置基础角度为135°，若以圆心所在竖线为0°参考点，左右各为135°，所以总共有270°，也就是下图大扇形区域内的黑环中。（实际绘图是以圆心所在横线右侧为0°）

我们在刻度盘中画10个大刻度，每个大刻度里画5个小刻度，所以总共有5*10=50个刻度，每个刻度的所占度数为：270° / (5 * 10)=5.4°。然后我们现在就知道了每个刻度的角度，例如第一个刻度的角度为135度，第二个刻度的角度为140.4°；

刻度无非就是直线，为了画出直线，我们必须知道直线的起点和终点。对于起点而言（刻度线的外端点），它的半径是固定的，即黑色圆的半径；对于终点而言（刻度线的内端点），它的半径是不固定的，大刻度线比较长，小刻度线比较短，大刻度线对应的半径为内层圆的半径（黑色圆环的内侧到圆心的距离），小刻度线对应的半径为内层圆的半径往外偏移一些（大于黑色圆环的内侧到圆心的距离）。

现在我们知道了每个刻度线对应的角度和半径，我们就可以求出每条刻度线的起点和终点了，公式如下：

int x = 圆心的横坐标 + 半径 * cos(角度 * π / 180);
int y = 圆心的纵坐标 + 半径 * sin(角度 * π / 180);

4、绘制文字

我们需要绘制的有两部分：第一部分实时的数值，第二部分是刻度对应的数值。我们只绘制大刻度的数值，可以参考绘制刻度中采用的方法确定待绘制刻度值的坐标，然后绘制一个正方体，在其中填入要绘制的刻度值（字符类型）。

5、绘制指针

指针我们把它拆分为两部分：第一部分为一个三角形；第二部分为一个同色的圆。画三角形需要确定三个点，最外部那个点的半径是最内层圆的半径，内部那两个点的半径是相同的，只需要满足它们的半径小于同色的圆的半径即可。

二、运行原理详解

由于我们的绘制事件函数采用定时器定时执行，所以我们只需要改变当前的值，在其重绘指针时就会根据当前的值重写计算并绘制指针，所以看起来的效果就是我们改变当前的值指针就会移动。