Android仿支付宝上芝麻信用分雷达图

概述一、首先看下支付宝上芝麻信用分的效果图：二、思路    1、确定雷达图中心点坐标

一、首先看下支付宝上芝麻信用分的效果图：

二、思路

     1、确定雷达图中心点坐标

     2、绘制多边形及连接线

     3、根据维度值绘制覆盖区域

     4、绘制分数

     5、绘制每个维度的标题文字和图标

三、实现

获取布局的中心坐标

在onSizeChanged(int w,int h,int olDW,int oldh)方法里面，根据VIEw的长宽，计算出雷达图的半径（这里取布局宽高最小值的四分之一，可以自定义），获取整个布局的中心坐标。

public class CreditscoreVIEw extends VIEw { //数据个数 private int dataCount = 5; //每个角的弧度 private float radian = (float) (Math.PI * 2 / dataCount); //雷达图半径 private float radius; //中心X坐标 private int centerX; //中心Y坐标 private int centerY; //各维度标题 private String[] Titles = {"履约能力","信用历史","人脉关系","行为偏好","身份特质"}; //各维度图标 private int[] icons = {R.mipmap.ic_performance,R.mipmap.ic_history,R.mipmap.ic_contacts,R.mipmap.ic_predilection,R.mipmap.ic_IDentity}; //各维度分值 private float[] data = {170,180,160,170,180}; //数据最大值 private float maxValue = 190; //雷达图与标题的间距 private int radarmargin = DensityUtils.dp2px(getContext(),15); //雷达区画笔 private Paint mainPaint; //数据区画笔 private Paint valuePaint; //分数画笔 private Paint scorePaint; //标题画笔 private Paint TitlePaint; //图标画笔 private Paint iconPaint; //分数大小 private int scoreSize = DensityUtils.dp2px(getContext(),28); //标题文字大小 private int TitleSize = DensityUtils.dp2px(getContext(),13); ... @OverrIDe protected voID onSizeChanged(int w,int oldh) {  //雷达图半径  radius = Math.min(h,w) / 2 * 0.5f;  //中心坐标  centerX = w / 2;  centerY = h / 2;  postInvalIDate();  super.onSizeChanged(w,h,olDW,oldh); } ...}

绘制多边形和连接线

主要看下getPoint方法，此方法封装了获取雷达图上各个点坐标的计算逻辑。

/** * 绘制多边形 * * @param canvas 画布 */private voID drawpolygon(Canvas canvas) { Path path = new Path(); for (int i = 0; i < dataCount; i++) {  if (i == 0) {   path.moveto(getPoint(i).x,getPoint(i).y);  } else {   path.lineto(getPoint(i).x,getPoint(i).y);  } } //闭合路径 path.close(); canvas.drawPath(path,mainPaint);}/** * 绘制连接线 * * @param canvas 画布 */private voID drawlines(Canvas canvas) { Path path = new Path(); for (int i = 0; i < dataCount; i++) {  path.reset();  path.moveto(centerX,centerY);  path.lineto(getPoint(i).x,getPoint(i).y);  canvas.drawPath(path,mainPaint); }}

getPoint方法，参数radarmargin与percent在此步骤赋予默认值。

/** * 获取雷达图上各个点的坐标 * * @param position 坐标位置（右上角为0，顺时针递增） * @return 坐标 */private Point getPoint(int position) { return getPoint(position,1);}/** * 获取雷达图上各个点的坐标（包括维度标题与图标的坐标） * * @param position 坐标位置 * @param radarmargin 雷达图与维度标题的间距 * @param percent  覆盖区的的百分比 * @return 坐标 */private Point getPoint(int position,int radarmargin,float percent) { int x = 0; int y = 0; if (position == 0) {  x = (int) (centerX + (radius + radarmargin) * Math.sin(radian) * percent);  y = (int) (centerY - (radius + radarmargin) * Math.cos(radian) * percent); } else if (position == 1) {  x = (int) (centerX + (radius + radarmargin) * Math.sin(radian / 2) * percent);  y = (int) (centerY + (radius + radarmargin) * Math.cos(radian / 2) * percent); } else if (position == 2) {  x = (int) (centerX - (radius + radarmargin) * Math.sin(radian / 2) * percent);  y = (int) (centerY + (radius + radarmargin) * Math.cos(radian / 2) * percent); } else if (position == 3) {  x = (int) (centerX - (radius + radarmargin) * Math.sin(radian) * percent);  y = (int) (centerY - (radius + radarmargin) * Math.cos(radian) * percent); } else if (position == 4) {  x = centerX;  y = (int) (centerY - (radius + radarmargin) * percent); } return new Point(x,y);}

多边形和连接线

绘制覆盖区域

/** * 绘制覆盖区域 * * @param canvas 画布 */private voID drawRegion(Canvas canvas) { Path path = new Path(); for (int i = 0; i < dataCount; i++) {  //计算百分比  float percent = data[i] / maxValue;  int x = getPoint(i,percent).x;  int y = getPoint(i,percent).y;  if (i == 0) {   path.moveto(x,y);  } else {   path.lineto(x,y);  } } //绘制填充区域的边界 path.close(); valuePaint.setStyle(Paint.Style.stroke); canvas.drawPath(path,valuePaint); //绘制填充区域 valuePaint.setStyle(Paint.Style.FILL_AND_stroke); canvas.drawPath(path,valuePaint);}

覆盖区域

绘制分数

/** * 绘制分数 * * @param canvas 画布 */private voID drawscore(Canvas canvas) { int score = 0; //计算总分 for (int i = 0; i < dataCount; i++) {  score += data[i]; } canvas.drawText(score + "",centerX,centerY + scoreSize / 2,scorePaint);}

分数

绘制标题

/** * 绘制标题 * * @param canvas 画布 */private voID drawTitle(Canvas canvas) { for (int i = 0; i < dataCount; i++) {  int x = getPoint(i,radarmargin,1).x;  int y = getPoint(i,1).y;  Bitmap bitmap = BitmapFactory.decodeResource(getResources(),icons[i]);  int iconHeight = bitmap.getHeight();  float TitleWIDth = TitlePaint.measureText(Titles[i]);  //底下两个角的坐标需要向下移动半个图片的位置（1、2）  if (i == 1) {   y += (iconHeight / 2);  } else if (i == 2) {   x -= TitleWIDth;   y += (iconHeight / 2);  } else if (i == 3) {   x -= TitleWIDth;  } else if (i == 4) {   x -= TitleWIDth / 2;  }  canvas.drawText(Titles[i],x,y,TitlePaint); }}

标题

绘制图标

/** * 绘制图标 * * @param canvas 画布 */private voID drawIcon(Canvas canvas) { for (int i = 0; i < dataCount; i++) {  int x = getPoint(i,icons[i]);  int iconWIDth = bitmap.getWIDth();  int iconHeight = bitmap.getHeight();  float TitleWIDth = TitlePaint.measureText(Titles[i]);  //上面获取到的x、y坐标是标题左下角的坐标  //需要将图标移动到标题上方居中位置  if (i == 0) {   x += (TitleWIDth - iconWIDth) / 2;   y -= (iconHeight + getTextHeight(TitlePaint));  } else if (i == 1) {   x += (TitleWIDth - iconWIDth) / 2;   y -= (iconHeight / 2 + getTextHeight(TitlePaint));  } else if (i == 2) {   x -= (iconWIDth + (TitleWIDth - iconWIDth) / 2);   y -= (iconHeight / 2 + getTextHeight(TitlePaint));  } else if (i == 3) {   x -= (iconWIDth + (TitleWIDth - iconWIDth) / 2);   y -= (iconHeight + getTextHeight(TitlePaint));  } else if (i == 4) {   x -= iconWIDth / 2;   y -= (iconHeight + getTextHeight(TitlePaint));  }  canvas.drawBitmap(bitmap,TitlePaint); }}/** * 获取文本的高度 * * @param paint 文本绘制的画笔 * @return 文本高度 */private int getTextHeight(Paint paint) { Paint.FontMetrics FontMetrics = paint.getFontMetrics(); return (int) (FontMetrics.descent - FontMetrics.ascent);}

图标

总结

好了，到这里主要的绘制工作就完成了，有些图标实在找不到，就用相似的代替了。希望这篇文章的内容对各位AndroID开发者们能有所帮助，如果有疑问大家可以留言交流。

总结

以上是内存溢出为你收集整理的Android仿支付宝上芝麻信用分雷达图全部内容，希望文章能够帮你解决Android仿支付宝上芝麻信用分雷达图所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。