android 正五边形图表,Android自定义View-蜘蛛网属性图（五边形图）

首先看看效果图：

这里写图片描述

先简要说一下这里需要涉及到的知识点：

高中基本的三角函数 Sin，Cos。

参考的文章：

这里为了尊重上面这篇文章的作者，需要说明一下，下面的代码有部分是参考上面这篇文章的。这里我学习之后有了自己的理解。做了一点小改动，然后以自己的思路来捋一捋。希望我的文字对你更有帮助，哈哈。 (Pentagon --五边形)

绘制思路：

计算三个五边形的五个顶点的坐标，用 path 连接起来并绘制

计算要显示的数据的五个顶点的坐标，用 path 连接起来并绘制

绘制五条射线

计算图标和标题的坐标位置，并绘制

绘制中间的分数

第一步：绘制三个五边形和红色五边形

这里写图片描述

初始化成员变量

private int dataCount = 5;//多边形维度

private float radian = (float) (Math.PI * 2 / dataCount);//每个维度的角度

private float radius;//一条星射线的长度，即是发散的五条线白线

private int centerX;//中心坐标 Y

private int centerY;//中心坐标 X

private String[] titles = {"履约能力", "信用历史", "人脉关系", "行为偏好", "身份特质"};//标题

private int[] icos = {R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher};//五个维度的图标

private float[] data = {170, 180, 100, 170, 150};//五个维度的数据值

private float maxValue = 190;//每个维度的最大值

private Paint mPaintText;//绘制文字的画笔

private int radarMargin = 40;//

private int mAlpha;//白色五边形的透明度

private Path mPentagonPath;//记录白色五边形的路径

private Paint mPentagonPaint;//绘制白色五边形的画笔

private Path mDataPath;//记录红色五边形的路径

private Paint mDataPaint;//绘制红色五边形的画笔

构造方法中初始化的数据

private void init() {

mPentagonPaint = new Paint();//初始化白色五边形的画笔

mPentagonPaint.setAntiAlias(true);//

mPentagonPaint.setStrokeWidth(5);//

mPentagonPaint.setColor(Color.WHITE);//

mPentagonPaint.setStyle(Paint.Style.FILL_AND_STROKE);//

mDataPaint = new Paint();//初始化红色五边形的画笔

mDataPaint.setAntiAlias(true);//

mDataPaint.setStrokeWidth(10);//

mDataPaint.setColor(Color.RED);//

mDataPaint.setAlpha(150);//

mDataPaint.setStyle(Paint.Style.STROKE);//

mPaintText = new Paint();//初始化文字画笔

mPaintText.setAntiAlias(true);//

mPaintText.setTextSize(50);//

mPaintText.setColor(Color.WHITE);//

mPaintText.setStyle(Paint.Style.FILL);//

mPentagonPath = new Path();//初始化白色五边形路径

mDataPath = new Path();//初始化红色五边形路径

radius = 80;//星射线的初始值，也是最小的五边形的一条星射线的长度(后期会递增)

mAlpha = 150;//白色五边形的透明度(后期后递减)

}

初始化数据之后是通过 radius 的长度来计算五边形五个顶点的坐标值，后期通过改变 radius 的值，来达到计算三个白色五边形的五个顶点的值。这里给出一张图，帮助理解。通过图中的两个红色三角形就可以求出顶点的坐标了。

这里写图片描述

**右上角的顶点为第一个点，顺时针计算，position 依次是 0，1，2，3，4 **

public Point getPoint(int position) {

return getPoint(position, 0, 1);

}

// 参数：position：顶点的位置，radarMargin：边距，percent：星射线长度的百分比，用于计算红色五边形的顶点

public Point getPoint(int position, int radarMargin, float percent) {//以五边形的中心点为坐标原点

int x = 0;

int y = 0;

switch (position) {

case 0://第一象限，右上角顶点的坐标计算

x = (int) (centerX + (radius + radarMargin) * Math.sin(radian) * percent);

y = (int) (centerY - (radius + radarMargin) * Math.cos(radian) * percent);

break;

case 1://第四象限，右下角顶点的坐标计算

x = (int) (centerX + (radius + radarMargin) * Math.sin(radian / 2) * percent);

y = (int) (centerY +