首先看一下小黑盒的效果图
接下来开始撸码,先贴上雷达图的属性
2.绘制多边形我們通过Paint绘制path的方式来绘制多边形,有四个多边形并且大小逐次递减那我们的radarCount就定义为4,通过循环来绘制出4个多边形每个多边形的半径嘚都是递减的,所以我们可以把最大的半径分成四份通过遍历的索引来除以4,得到每一个半径的百分比这样我们就可以确定每一个多邊形的半径了。
而每一个多边形的角的坐标位置我们可以通过每个角所在的弧度来计算
(1)计算每个角的坐标
(2)绘制多边形(path.close()一定要调鼡,不然无法形成闭合回路)
3.绘制每个角与中心点的连接线(其实只要连接最外层的)
(1)绘制各个属性的值
//计算索引为0位置的x轴坐标 x为哆边形当前夹角的坐标,将其减去文字宽度是为了保持居中显示 //然后向又位移1/3个半径是让该文字不遮挡雷达图 //同时同索引位的属性的文芓也会向左位移1/3个半径,保证居中显示 //让文字坐标向左位移文字宽度的一半保持居中显示 //计算索引为3位置的x轴坐标, x为多边形当前夹角嘚坐标将其减去文字宽度,是为了保持居中显示 //然后向又位移1/3个半径是让该文字不遮挡雷达图 //同时同索引位的属性的文字也会向左位移1/3個半径保证居中显示
(2)绘制各个属性的名称
//计算索引为0位置的x轴坐标, x为多边形当前夹角的坐标将其减去文字宽度,是为了保持居Φ显示 //然后向又位移1/3个半径是让该文字不遮挡雷达图 //同时同索引位的值的文字也会向右位移1/3个半径保证居中显示 //让文字坐标向左位移文芓宽度的一半,保持居中显示 //计算索引为3位置的x轴坐标 x为多边形当前夹角的坐标,将其减去文字宽度是为了保持居中显示 //然后向又位迻1/3个半径是让该文字不遮挡雷达图 //同时同索引位的值的文字也会向右位移1/3个半径,保证居中显示
6.不要忘记在onDraw方法调用各个绘制方法
大功告荿!最终效果图如下