废话不多说,先看看效果图:

radar.gif

    

    实现思路:

    雷达效果包括三个部分:背景、转动的扇形和闪烁的点。

    1.背景的实现很简单,首先填充背景色,然后绘制横纵坐标轴以及三个同心圆。代码如下:

 

     在这里有个m_drawArea是用来描述绘制雷达的区域的。先确定这个绘制区域,更容易计算绘制的内容。 m_drawArea的大小在resizeEvent事件中确定。

    为了确保雷达为圆形,我们以较短的边作为矩形的边长。然后使用adjust缩小一点。adjust前两个参数为左上角x和y的增量,后两个参数为右下角x和y的增量。

 

    2.转动部分由一个扇形和一条直线组成。扇形使用了锥形渐变色。代码如下:

    直线的绘制很简单,只需要计算转动角度对应圆上的点的坐标即可。扇形的绘制也很简单。难点在于渐变色的应用,由于锥形渐变是逆时针的,而我们的雷达是顺时针的转动。所以要计算好扇形区域在渐变的哪个范围。这里设置了渐变角度为扇形角度旋转180度,那么扇形区域应该在渐变角度的0.5 - 0.75范围内。由于这里使用的是int类型,怕计算的不精确,将渐变颜色的范围设置大一些。

 

    3.第三部分是随机闪烁的点,用来点缀。在这里使用了一个list存放点的坐标,另一个list存放这些点的颜色alapha值。使用一个定时器随机改变这些点的坐标值和alapha值。


    第一个定时器是用来改变转动部分的角度的。第二个定时器才是用来改变闪烁点的。

 

    测试环境Qt5.9.1,

    源码地址:https://www.fearlazy.com/demos.html