Kotlin 自定义View 仪表盘指示器colorfulpanel

话不多说，先看效果图。自定义View很简单

回弹效果

我这就说下大致思路，还不懂的去看git上的看代码。

1.上图中，出现图形最多的就是圆弧，这个很简单我们可以使用canvas.drawArc方法绘制圆弧

2.然后圆，中间的有透明度的圆，和指针底部无透明度的小圆。这个也简单使用canvas.drawCircle方法绘制，透明度可以用paint的alpha属性设置。这里有个细节，大家可以去看我的代码都有注释

3.在看下中间的，比较复杂的指针箭头。一种方式是让美工切一个，然后画出来。另一种用canvas的drawPath方法，绘制出来。我使用的是后一种，毕竟不是太复杂，而且还能练练手。

4.接下来就是渐变色了，我们可以SweepGradient类，设置到paint 的shader属性上即可，但如果要做到图中的效果，我们还要做些旋转，这个看代码就行了。

5.最后是动画。我们是用BounceInterpolator这个差值器实现，可以看到是有回弹效果的。小伙伴们也可以换成变得，比如先快后慢等。

下面是git地址，大致框架已经说了，省下的看代码更清楚

https://github.com/allenzhangp/colorfulpanel/blob/master/README.md

下面我再啰嗦下，可能有些小伙伴代码也看的费劲

---

(1)记住下面这张图，我们坐标的计算都是按照这图上的坐标系来写的。x和y已经画出来了横轴是x轴，纵轴是y轴。然后正东面表示0°，顺时针是正的度数。

然后在记住下面这个公式换算，计算在圆上点的坐标方程，如果圆心坐标是（x0,y0）,圆的半径r

那么圆上angleRadians角度的坐标为

val angleRadians = realAngle * Math.PI /180 //换算成弧度,realAngle为角度，比如270°

x1 = r * Math.cos(angleRadians).toFloat() +x0

y1 = r * Math.sin(angleRadians).toFloat() +y0

这个公式在代码中多次用到，计算坐标很方便

坐标系

（2）如果细心的小伙伴应该已经看到了，左右两边和最上面黄色的那个四分之一圆有空隙，不是连续的（谁让美工觉得更好看呢）！。

空隙

但是我们的整体框架已经定了，每个弧度都代表四分之一圆，有这个白色的小块就很麻烦。怎么办呢？

如果左边的白色空隙和红色圆弧一起表示四分之一，右边那块空白和下面绿色圆弧一起表示四分之一，最上面的黄色一块表示四分之一，这样处理后期算坐标会方便很多。

如果还有不清楚的，可以直接回复。