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

最新推荐文章于 2025-06-23 18:20:41 发布

王先生技术栈

最新推荐文章于 2025-06-23 18:20:41 发布

阅读量703

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android界面探索

本文链接：https://blog.youkuaiyun.com/wanggang514260663/article/details/85123843

Android界面探索专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在安卓中使用Path绘制六边形、不规则图形及文字，包括坐标系变换、三角函数计算顶点坐标、文字尺寸计算等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

老规矩，先放上效果图

要实现上面的效果，需要使用到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-6
 final 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"));
    }

    @Override
    protected 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")
    @Override
    protected 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;
        }
    }
}