网状图的应用很常见了 大多数用在用户分析 比如战斗力图表等等

image.png

简单的描述下 流程吧 下面直接用六边形的例子

1.第一步首先要分析绘制出六个角的位置
画几何图形 一般都用path去绘制
先计算出六个角度的大小 网状图的半径

//角度  
/*PI就是圆周率π，PI是弧度制的π,也就是180°
所以，Math.PI = 3.14 = 180°
ps，PI是一个浮小数*/
//angle = 180°*2 / 6 = 1.04 = 60°
float angle = (float) (Math.PI * 2 / 6); 

//网状图的半径大小
int radius = 300;
//开始绘制
 Path path = new Path();
// 起点
  path.moveTo(centerX, centerY - curR);
//延伸路径
for (int j = 0; j <6; j++) {
                endX = (float) (centerX + curR * Math.sin(angle * j));
                endY = (float) (centerY - curR * Math.cos(angle * j));
                path.lineTo(endX, endY);
            }
//闭环
 path.close();
绘制
 canvas.drawPath(path, polygonPaint);

形状到此就绘制玩了

2.第二部绘制对角线的位置

//其实和形状一样 唯一的区别就是 起始点位置
   Path path = new Path();
                for (int i = 0; i <6; i++) {
                    path.reset();
                    path.moveTo(centerX, centerY);
                    float x = (float) (centerX + radius * Math.sin(angle * i));
                    float y = (float) (centerY - radius * Math.cos(angle * i));
                    path.lineTo(x, y);
                    canvas.drawPath(path, linsPaint);

                }

3.最后一步绘制区域的百分比

//区域也和绘制形状一样 唯一的区别就是 半径要根据 最大阀值百分比换算
for (int j = 0; j < data.size(); j++) {
            float curR = radius * data.get(j).getValue() / maxValue;//当前半径
            float endX = (float) (centerX + curR * Math.sin(angle * j));
            float endY = (float) (centerY - curR * Math.cos(angle * j));
            if (j == 0) {
                path.moveTo(endX, endY);
            }
            path.lineTo(endX, endY);

        }
        path.close();

到此 绘制 形状就结束了

简单的封装了个demo 支持大于3的边角网状图

ReticularView

网状结构图 支持各种颜色 方法详情可见源码注释 三边 4边 12边 都可以

image.png
image.png
image.png
image.png

github