网状图的应用很常见了 大多数用在用户分析 比如战斗力图表等等
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
