android自定义View实现蜘蛛网图绘制

老规矩，先放上效果图

要实现上面的效果，需要使用到Path，建议先看看这遍文章，安卓自定义View进阶-Path之基本操作，本文的产生也是因为这遍文章后面的练习题。

先说一下在实现上面的难点
1、首先是6条边的绘制，实际上是确定6个点，之后进行连线，就形成了一个6变形。
2、不规则图形绘制，主要是根据数据换算出来每个点的位置，在绘制逻辑上和步骤1是一致的。
3、文字绘制，需要计算出来每个文字的高度和宽度，根据x轴，y轴进行位置判断，确保每个文字到图形距离是一致。

在绘制之前，首先确定一下坐标系，为了绘制方便，我们将坐标系置换成数学坐标系，这也是一般绘制的一个技巧

 //移动中心点
canvas.translate(getWidth() / 2, getHeight() / 2);
//调整y轴方向
canvas.scale(1, -1);  

1、绘制六边形

对于绘制6边形，就要用到数学知识了，三角函数走一波，我这里在做的时候画了一个草图，大家可以比较着思考看一下。（?，是真的很糙的图）

使用三角函数，我们可以确定出来每一个点的（x，y）坐标，因为中心点到每个点的位置是确定的，所以我们很容易得到一组计算公式。

//这里假定中心点到点的位置是300
x = cos(60) * 300
y = sin(60) * 300

上面的公式就确定出来了第一个点的位置坐标，而其他点，我们会发现只是这个角度值的变化不同而已，原理是一致的。所以就有了如下的代码。

// i是从0-6final float x = (float) (Math.cos(Math.toRadians(60 * i)) * dynRadius);
final float y = (float) (Math.sin(Math.toRadians(60 * i)) * dynRadius);

这里的Math.cos和Math.sin使用的是弧度值，所以使用Math.toRadians将角度转换为弧度计算。
下面放出这部分绘制的代码，可以比对思考下。

for (int k = 0; k < 6; k++) {final int dynRadius = (radius - radius * k / 6);path.moveTo(dynRadius, 0);if (k == 0) {points.add(new FloatPoint(dynRadius, 0));}for (int i = 1; i < gridCount; i++) {final float x = (float) (Math.cos(Math.toRadians(60 * i)) * dynRadius);final float y = (float) (Math.sin(Math.toRadians(60 * i)) * dynRadius);path.lineTo(x, y);if (k == 0) {points.add(new FloatPoint(x, y));}}path.close();
}
canvas.drawPath(path, paint);canvas.scale(1, -1);
//绘制链接圆心的线
for (int i = 0; i < points.size(); i++) {paint.setStyle(Paint.Style.STROKE);canvas.drawLine(points.get(i).x, points.get(i).y, 0, 0, paint);
}

2、绘制不规则图形

对于不规则图形，其实差别就是每一个点到中心点的位置不再固定，而是通过传入的数据计算出来的。所以实现方式是一致的，在最后的源码中可以看到。

3、绘制文字

对于文字绘制，最主要的其实就是拿到文字的宽高，可以使用textPaint.getTextBounds(pointLetters[0], 0, pointLetters[0].length(), textRect);方式得到，而在绘制六边形的时候已经确定了6个点的位置，只需要在此基础上进行一定的位置偏移就可以了。

 canvas.drawText(pointLetters[0], radius + 40 * (radius / 400F), 0, textPaint);for (int i = 1; i < gridCount; i++) {final float x = (float) (Math.cos(Math.toRadians(60 * i)) * (radius + 40 * (radius / 400F)));final float y = (float) (Math.sin(Math.toRadians(60 * i)) * (radius + 40 * (radius / 400F)));textPaint.getTextBounds(pointLetters[0], 0, pointLetters[0].length(), textRect);if (y < 0) {canvas.drawText(pointLetters[i], x - textRect.width(), y, textPaint);} else {canvas.drawText(pointLetters[i], x - textRect.width(), y + textRect.height(), textPaint);}}

4、最后放出源代码

public class SpiderView extends View {private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);private Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);private Paint spiderPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);private Path path = new Path();private Path spiderPath = new Path();private Rect textRect = new Rect();private int radius;private int gridCount = 6;private final List<FloatPoint> points = new ArrayList<>();private String[] pointLetters;private int[] pointProgress;public SpiderView(Context context) {super(context);}public SpiderView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);init();}public void setData(List<SpiderData> dataList) {if (dataList == null || dataList.size() == 0) {return;}pointLetters = new String[dataList.size()];pointProgress = new int[dataList.size()];for (int i = 0; i < dataList.size(); i++) {pointLetters[i] = dataList.get(i).label;pointProgress[i] = dataList.get(i).value;}invalidate();}private void init() {paint.setStyle(Paint.Style.STROKE);paint.setColor(Color.parseColor("#999999"));paint.setStrokeWidth(2);points.clear();spiderPaint.setStyle(Paint.Style.FILL);spiderPaint.setColor(Color.parseColor("#8098ccd3"));textPaint.setColor(Color.parseColor("#F14400"));}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);radius = w / 6 * 4 / 2;//设置绘制文字大小textPaint.setTextSize(40 * (radius / 400F));}@SuppressLint("DrawAllocation")@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);path.reset();spiderPath.reset();points.clear();if (pointProgress == null || pointLetters.length == 0) {return;}//移动中心点canvas.translate(getWidth() / 2, getHeight() / 2);//调整y轴方向canvas.scale(1, -1);for (int k = 0; k < 6; k++) {final int dynRadius = (radius - radius * k / 6);path.moveTo(dynRadius, 0);if (k == 0) {points.add(new FloatPoint(dynRadius, 0));}for (int i = 1; i < gridCount; i++) {final float x = (float) (Math.cos(Math.toRadians(60 * i)) * dynRadius);final float y = (float) (Math.sin(Math.toRadians(60 * i)) * dynRadius);path.lineTo(x, y);if (k == 0) {points.add(new FloatPoint(x, y));}}path.close();}canvas.drawPath(path, paint);canvas.scale(1, -1);//绘制链接圆心的线for (int i = 0; i < points.size(); i++) {paint.setStyle(Paint.Style.STROKE);canvas.drawLine(points.get(i).x, points.get(i).y, 0, 0, paint);}//绘制文字canvas.drawText(pointLetters[0], radius + 40 * (radius / 400F), 0, textPaint);for (int i = 1; i < gridCount; i++) {final float x = (float) (Math.cos(Math.toRadians(60 * i)) * (radius + 40 * (radius / 400F)));final float y = (float) (Math.sin(Math.toRadians(60 * i)) * (radius + 40 * (radius / 400F)));textPaint.getTextBounds(pointLetters[0], 0, pointLetters[0].length(), textRect);if (y < 0) {canvas.drawText(pointLetters[i], x - textRect.width(), y, textPaint);} else {canvas.drawText(pointLetters[i], x - textRect.width(), y + textRect.height(), textPaint);}}//绘制占比spiderPath.moveTo(pointProgress[0], 0);for (int i = 1; i < pointProgress.length; i++) {final float x = (float) (Math.cos(Math.toRadians(60 * i)) * pointProgress[i]);final float y = (float) (Math.sin(Math.toRadians(60 * i)) * pointProgress[i]);spiderPath.lineTo(x, y);}spiderPath.close();canvas.drawPath(spiderPath, spiderPaint);}public void setSpiderColor(int color) {spiderPaint.setColor(color);invalidate();}public void setLetterColor(int color) {textPaint.setColor(color);invalidate();}public void setGridColor(int color) {paint.setColor(color);invalidate();}private static class FloatPoint {private float x;private float y;FloatPoint(float x, float y) {this.x = x;this.y = y;}public float getX() {return x;}public float getY() {return y;}}public static class SpiderData {private int value;private String label;public SpiderData(int value, String label) {this.value = value;this.label = label;}public int getValue() {return value;}public String getLabel() {return label;}}
}