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

作者:daisy 时间:2023-04-21 18:44:30 

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

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

二、思路

     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 h, int oldw, 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方法,参数radarMarginpercent在此步骤赋予默认值。


/**
* 获取雷达图上各个点的坐标
*
* @param position 坐标位置(右上角为0,顺时针递增)
* @return 坐标
*/
private Point getPoint(int position) {
return getPoint(position, 0, 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);
}

Android仿支付宝上芝麻信用分雷达图
多边形和连接线

绘制覆盖区域


/**
* 绘制覆盖区域
*
* @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, 0, percent).x;
 int y = getPoint(i, 0, 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);
}

Android仿支付宝上芝麻信用分雷达图
覆盖区域

绘制分数


/**
* 绘制分数
*
* @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);
}

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

绘制标题


/**
* 绘制标题
*
* @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, radarMargin, 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);
}
}

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

绘制图标


/**
* 绘制图标
*
* @param canvas 画布
*/
private void drawIcon(Canvas canvas) {
for (int i = 0; i < dataCount; i++) {
 int x = getPoint(i, radarMargin, 1).x;
 int y = getPoint(i, radarMargin, 1).y;

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), 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, x, y, titlePaint);
}
}
/**
* 获取文本的高度
*
* @param paint 文本绘制的画笔
* @return 文本高度
*/
private int getTextHeight(Paint paint) {
Paint.FontMetrics fontMetrics = paint.getFontMetrics();
return (int) (fontMetrics.descent - fontMetrics.ascent);
}

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

总结

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

标签:android,雷达图
0
投稿

猜你喜欢

  • Java 开启多线程常见的4种方法

    2023-11-23 02:30:10
  • Java 中解决Unsupported major.minor version 51.0的问题

    2022-07-22 03:53:08
  • Springboot文件上传功能的实现

    2021-09-20 12:48:47
  • 使用 Java8 实现观察者模式的方法(下)

    2021-08-03 04:21:37
  • C#实现鼠标消息捕获

    2021-06-14 20:38:38
  • @GrpcServise 注解的作用和使用示例详解

    2021-07-25 21:12:25
  • Java Idea TranslationPlugin翻译插件使用解析

    2023-12-01 10:25:02
  • Android复选框CheckBox与开关按钮Switch及单选按钮RadioButton使用示例详解

    2023-02-06 18:20:42
  • Android Camera+SurfaceView自动聚焦防止变形拉伸

    2023-06-18 06:35:54
  • 详解基于java的Socket聊天程序——客户端(附demo)

    2021-06-28 04:19:54
  • C#实现简单文本编辑器

    2022-04-28 06:42:30
  • Java数据结构之二叉排序树的实现

    2023-07-05 02:27:25
  • 解析Spring Mvc Long类型精度丢失问题

    2021-11-06 12:27:37
  • android 权限大全 分享

    2023-03-30 18:06:22
  • Android WorkManager浅谈

    2023-03-24 11:26:46
  • c# 重载WndProc,实现重写“最小化”的实现方法

    2022-10-22 10:16:13
  • 解决RedisTemplate存储至缓存数据出现乱码的情况

    2023-04-20 15:30:58
  • Android中Service实时向Activity传递数据实例分析

    2022-07-22 20:44:15
  • JAVA及相关字符集编码问题研究分享

    2022-05-16 20:33:08
  • Java中缀表达式转后缀表达式实现方法详解

    2021-08-25 02:57:20
  • asp之家 软件编程 m.aspxhome.com