首先看一下小黑盒的效果图
接下來开始撸码先贴上雷达图的属性
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方法调用各个绘制方法
大功告成!最终效果图如下