资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/手动撸个Android雷达图（蜘蛛网图）RadarView

手动撸个Android雷达图（蜘蛛网图）RadarView

forsigner / 3042人阅读

摘要：原文链接公司产品需要一个雷达图来展示各维度的比重，网上找了一波，学到不少，直接自己上手来撸一记无图言虚空简单分析一波，确定雷达图正几边形的正五边形，分为几个层数层画边画线描绘文字覆盖区域主要这几步，开撸自定义继承确定需要使用的变量，

</>复制代码 
  1. 原文链接 https://mp.weixin.qq.com/s/Ms...

公司产品需要一个雷达图来展示各维度的比重，网上找了一波，学到不少，直接自己上手来撸一记

无图言虚空

简单分析一波，确定雷达图正几边形的--正五边形 int count=5，分为几个层数--4 层 int layerCount=4

</>复制代码 
  1.     @Override
  2.     protected void onDraw(Canvas canvas) {
  3.         super.onDraw(canvas);
  4.         drawPolygon(canvas);//画边
  5.         drawLines(canvas);//画线
  6.         drawText(canvas);//描绘文字
  7.         drawRegion(canvas);//覆盖区域
  8.     }

主要这几步，开撸！

自定义RadarView继承View

确定需要使用的变量，初始化paint，计算圆心角

</>复制代码 
  1. private int count = 5; //几边形    
  2. private int layerCount = 4; //层数    
  3. privatefloatangle; //每条边对应的圆心角   
  4. private int centerX; //圆心x    
  5. private int centerY; //圆心y    
  6. privatefloatradius; //半径    
  7. private Paint polygonPaint; //边框paint    
  8. private Paint linePaint; //连线paint    
  9. private Paint txtPaint; //文字paint    
  10. private Paint circlePaint; //圆点paint    
  11. private Paint regionColorPaint; //覆盖区域paint    
  12. private Double[] percents = {0.91, 0.35, 0.12, 0.8, 0.5}; //覆盖区域百分比    
  13. private String[] titles = {"dota","斗地主","大吉大利，晚上吃鸡","炉石传说","跳一跳"};//文字
</>复制代码 
  1.     public RadarView(Context context) {
  2.         this(context, null, 0);
  3.     }
  4.     public RadarView(Context context, @Nullable AttributeSet attrs) {
  5.         this(context, attrs, 0);
  6.     }
  7.     public RadarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  8.         super(context, attrs, defStyleAttr);
  9.         //计算圆心角
  10.         angle = (float) (Math.PI * 2 / count);
  11.         polygonPaint = new Paint();
  12.         polygonPaint.setColor(ContextCompat.getColor(context, R.color.radarPolygonColor));
  13.         polygonPaint.setAntiAlias(true);
  14.         polygonPaint.setStyle(Paint.Style.STROKE);
  15.         polygonPaint.setStrokeWidth(4f);
  16.         linePaint = new Paint();
  17.         linePaint.setColor(ContextCompat.getColor(context, R.color.radarLineColor));
  18.         linePaint.setAntiAlias(true);
  19.         linePaint.setStyle(Paint.Style.STROKE);
  20.         linePaint.setStrokeWidth(2f);
  21.         txtPaint = new Paint();
  22.         txtPaint.setColor(ContextCompat.getColor(context, R.color.radarTxtColor));
  23.         txtPaint.setAntiAlias(true);
  24.         txtPaint.setStyle(Paint.Style.STROKE);
  25.         txtPaint.setTextSize(DensityUtil.dpToPx(context, 12));
  26.         circlePaint = new Paint();
  27.         circlePaint.setColor(ContextCompat.getColor(context, R.color.radarCircleColor));
  28.         circlePaint.setAntiAlias(true);
  29.         regionColorPaint = new Paint();
  30.         regionColorPaint.setColor(ContextCompat.getColor(context, R.color.radarRegionColor));
  31.         regionColorPaint.setStyle(Paint.Style.FILL);
  32.         regionColorPaint.setAntiAlias(true);
  33.     }
确定中心点

需要正五边形得有一个圆，圆内接正五边形，在onSizeChanged方法里获取圆心，确定半径

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        radius = Math.min(h, w) / 2 * 0.7f;
        centerX = w / 2;
        centerY = h / 2;
    }

绘制正五边形

绘制正五边形同时描绘最外围的点，确定分为4层，半径 / 层数 =每层之间的间距，从最里层开始画正五边形，每层第一个点位于中心点正上方

</>复制代码 
  1.   private void drawPolygon(Canvas canvas) {
  2.         Path path = new Path();
  3.         float r = radius / layerCount;
  4.         for (int i = 1; i <= layerCount; i++) {
  5.             float curR = r * i; //当前所在层的半径
  6.             for (int j = 0; j < count; j++) {
  7.                 if (j == 0) {
  8.                     //每一层第一个点坐标
  9.                     path.moveTo(centerX, centerY - curR);  
  10.                 } else {
  11.                     //顺时针记录其余顶角的点坐标
  12.                     float x = (float) (centerX + Math.sin(angle * j) * curR);
  13.                     float y = (float) (centerY - Math.cos(angle * j) * curR);
  14.                     path.lineTo(x, y);
  15.                 }
  16.             }
  17.             //最外层的顶角外面的五个小圆点(图中红色部分)
  18.             if (i == layerCount) {
  19.                 for (int j = 0; j < count; j++) {
  20.                     float x = (float) (centerX + Math.sin(angle * j) * (curR + 12));
  21.                     float y = (float) (centerY - Math.cos(angle * j) * (curR + 12));
  22.                     canvas.drawCircle(x, y, 4, circlePaint);
  23.                 }
  24.             }
  25.             path.close();
  26.             canvas.drawPath(path, polygonPaint);
  27.         }
  28.     }

绘制连线

绘制最内层顶角到最外层顶角的连线

</>复制代码 
  1.   private void drawLines(Canvas canvas) {
  2.         float r = radius / layerCount;
  3.         for (int i = 0; i < count; i++) {
  4.             //起始坐标 从中心开始的话 startx=centerX , startY=centerY
  5.             float startX = (float) (centerX + Math.sin(angle * i) * r);
  6.             float startY = (float) (centerY - Math.cos(angle * i) * r);
  7.             //末端坐标
  8.             float endX = (float) (centerX + Math.sin(angle * i) * radius);
  9.             float endY = (float) (centerY - Math.cos(angle * i) * radius);
  10.             canvas.drawLine(startX, startY, endX, endY, linePaint);
  11.         }
  12.     }


至此简易雷达图成型，可以修改正几边形，多少层数（后续继续添加文字）

</>复制代码 
  1.     //设置几边形，**注意：设置几边形需要重新计算圆心角**
  2.     public void setCount(int count){
  3.         this.count = count;
  4.         angle = (float) (Math.PI * 2 / count);
  5.         invalidate();
  6.     }
  7.     //设置层数
  8.     public void setLayerCount(int layerCount){
  9.         this.layerCount = layerCount;
  10.         invalidate();
  11.     }

设置正六边形、六层

    radarView.setCount(6);
    radarView.setLayerCount(6);

对于以下图形的，可以设置第一个点坐标位于中心点正右侧(centerX+curR,centerY)，顺时针计算其余顶点坐标x = (float) (centerX+curR*Math.cos(angle*j)), y = (float) (centerY+curR*Math.sin(angle*j))，同理连线等其余坐标相应改变...

描绘文字

由于各产品维度内容不同，所需雷达图样式不一，这里只是描绘下不同位置的文字处理情况，具体需求还得按产品来，因产品而异

</>复制代码 
  1.     private void drawText(Canvas canvas) {
  2.         for (int i = 0; i < count; i++) {
  3.             //获取到雷达图最外边的坐标
  4.             float x = (float) (centerX + Math.sin(angle * i) * (radius + 12));
  5.             float y = (float) (centerY - Math.cos(angle * i) * (radius + 12));
  6.             if (angle * i == 0) {
  7.                 //第一个文字位于顶角正上方
  8.                 txtPaint.setTextAlign(Paint.Align.CENTER);
  9.                 canvas.drawText(titles[i], x, y - 18, txtPaint);
  10.                 txtPaint.setTextAlign(Paint.Align.LEFT);
  11.             } else if (angle * i > 0 && angle * i < Math.PI / 2) {
  12.                 //微调
  13.                 canvas.drawText(titles[i], x + 18, y + 10, txtPaint);
  14.             } else if (angle * i >= Math.PI / 2 && angle * i < Math.PI) {
  15.                 //最右下的文字获取到文字的长、宽，按文字长度百分比向左移
  16.                 String txt = titles[i];
  17.                 Rect bounds = new Rect();
  18.                 txtPaint.getTextBounds(txt, 0, txt.length(), bounds);
  19.                 float height = bounds.bottom - bounds.top;
  20.                 float width = txtPaint.measureText(txt);
  21.                 canvas.drawText(txt, x - width * 0.4f, y + height + 18, txtPaint);
  22.             } else if (angle * i >= Math.PI && angle * i < 3 * Math.PI / 2) {
  23.                 //同理最左下的文字获取到文字的长、宽，按文字长度百分比向左移
  24.                 String txt = titles[i];
  25.                 Rect bounds = new Rect();
  26.                 txtPaint.getTextBounds(txt, 0, txt.length(), bounds);
  27.                 float width = txtPaint.measureText(txt);
  28.                 float height = bounds.bottom - bounds.top;
  29.                 canvas.drawText(txt, x - width * 0.6f, y + height + 18, txtPaint);
  30.             } else if (angle * i >= 3 * Math.PI / 2 && angle * i < 2 * Math.PI) {
  31.                 //文字向左移动
  32.                 String txt = titles[i];
  33.                 float width = txtPaint.measureText(txt);
  34.                 canvas.drawText(txt, x - width - 18, y + 10, txtPaint);
  35.             }
  36.         }
  37.     }

绘制覆盖区域

绘制覆盖区域，百分比取连线长度的百分比(如果从中心点开始的连线，则是半径的百分比)，此处用半径radius减去间隔r即连线长度

</>复制代码 
  1.    private void drawRegion(Canvas canvas) {
  2.         Path path = new Path();
  3.         float r = radius / layerCount;//每层的间距
  4.         for (int i = 0; i < count; i++) {
  5.             if (i == 0) {
  6.                 path.moveTo(centerX, (float) (centerY - r - (radius - r) * percents[i]));
  7.             } else {
  8.                 float x = (float) (centerX + Math.sin(angle * i) * (percents[i] * (radius - r) + r));
  9.                 float y = (float) (centerY - Math.cos(angle * i) * (percents[i] * (radius - r) + r));
  10.                 path.lineTo(x, y);
  11.             }
  12.         }
  13.         path.close();
  14.         canvas.drawPath(path, regionColorPaint);
  15.     }

至此，一个简单的雷达图完毕。
欢迎关注我的博客：https://blog.manjiexiang.cn/
同时欢迎关注微信公众号

GPU云服务器 云服务器 雷达图 气象雷达图 气象雷达图数据 js雷达图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/69544.html

相关文章

  • 【自定义View】洋葱数学同款雷达图深入解析-RadarView

    摘要：开箱即用的源码地址洋葱数学同款雷达图支持自定义属性雷达网的半径该属性决定了的宽高各属性表示的最大进度雷达网的颜色雷达网的线宽各属性文字的颜色各属性文字和中心处名字的字体路径中心连接区域的颜色中心连接区域的边框颜色中心处的名字中showImg(https://user-gold-cdn.xitu.io/2019/5/13/16ab091f638c526a); showImg(https://u...

    番茄西红柿 评论0 收藏0

  • [Android] View动画特效(二)

    摘要：酷炫的切换动画，打造更好的用户体验贝塞尔曲线实现冒泡泡动画一个绚丽的动效分析与实现雷达图蜘蛛网图绘制唯美的动画效果仿支付宝信用效果 酷炫的Activity切换动画，打造更好的用户体验 [Github:]()showImg(https://segmentfault.com/img/remote/1460000006761755?w=400&h=711); 贝塞尔曲线实现冒泡泡动画 [Gi...

    terro 评论0 收藏0

发表评论

登陆后可评论

0条评论

forsigner

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<