自定义控件之网状图

最近需求要求做几张图，刚刚写完了圆形进度图现在写网状图，其实网上好多第三方库文件，用来绘图的，比如AChartEngine，我目前还没有去研究，网上的说明不是很多，而且不如我自定义的控件随意，能快速自定义的的东西当然不要引用三方库，会造成资源浪费哈哈。

好了先看效果图：

我只想问帅不帅？？？我结合了网上的一些写法，还是觉得我自己写的比较简单哈，圈圈那个渐变色不存在，可能是只做gif色差影响的

咱们先写静态图，写完后升级动画，这样就简单了

先看需求图

再看我的静态效果图

修改下颜色和透明度就能达到和他一样的效果，稍有色差也是正常的

实现步骤：

1.画各个环，也就是多边形

2.画圆点到各个边的线

3.画蓝色区域

4.画红色区域

5.加动画效果

 

多边形怎么画呢，又不是圆，圆就好画多了。

我是这么画的，先确定几条边，也就得先得到几个点，然后算好个点的左边，连线就行。

各个点的左边是有规律的，其实就是个圆，等角度均分，然后半径与圆环的交点坐标就对了

咱们先把用到的属性列一下

还是测了宽高，和坐标

我就不粘代码，直接截图啊，一会儿我把资源类上传就行了啊

绘制正多边形，循环绘制一层一层的

绘制圆心向外的文字和直线

绘制蓝色区域

绘制红色区域

绘制

好了静态图写完了

现在加动画

这样就可以了，千万不要用allTime--算，要用比例，之前算半天，发现速度越来越快，就不对了，真得脑补数学了

还有多边形背景是白灰间隔的，所以绘制正多边形的时候要从外往里画，而且还得加上判断，随时改变画笔颜色和状态

好了，完事了

用法：在xml布局引入，在activity中调用：

myRadarView.setProgress();

根据需要自行增加方法设置参数，也可以增加自定义参数

最后附上自定义类的下载地址

MyRadarView是有动画效果的最终图

MyRadarView1是初始的静态图

下载地址

https://download.csdn.net/download/kac930/10651611