美文网首页具体自定义控件
android 自定义网状图

android 自定义网状图

作者: 三月四晴 | 来源:发表于2020-01-21 10:38 被阅读0次

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

    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

    相关文章

      网友评论

        本文标题:android 自定义网状图

        本文链接:https://www.haomeiwen.com/subject/jlxezctx.html