網狀圖的應用很常見了大多數用在用戶分析比如戰鬥力圖表等等

簡單的描述下流程吧下面直接用六邊形的例子

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的邊角網狀圖