Android 绘制饼图

最新推荐文章于 2025-03-14 13:48:41 发布

Andy-Action-Now

最新推荐文章于 2025-03-14 13:48:41 发布

阅读量1.9k

点赞数

分类专栏： Android JAVA 文章标签： android 饼图

本文链接：https://blog.youkuaiyun.com/daddy_long_legs/article/details/90552187

版权

Android 同时被 2 个专栏收录

9 篇文章

订阅专栏

JAVA

3 篇文章

订阅专栏

本文介绍了如何在Android中实现一个自定义的饼图组件，包括如何确定饼图中心点、计算半径、设置起始角度和绘制文本，详细阐述了绘制饼图的步骤，并提供了相关代码片段。

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

需求：

1. 将一个圆形6等分的饼图，在每个饼图的中心显示当前饼图代表的含义

绘制步骤：

1. 画布中心点： centerX = getWidht() / 2; centerY = getWidth() / 2;

2. 原型的半径，定义为高度的4分之一， radius = getHeight() / 4 > getWidth() /2 ? getWidth() /2 : getHeight() /4;

3. 由于绘制弧度图时是从相对Y轴90度开始的，定义开始角度为 startAngle, 绘制的角度为 sweepAngle, 弧度图中心点的位置用来显示数字，则其中心点相对于Y轴角度为 textAngle = 90 + startAngle + sweepAngle / 2;

4. 计算绘制文本的坐标, textX = centerX + radius * Math.sin(Math.toRadians(textAngle);

textY = centerY - radius * Math.sin(Math.toRadians(textAngle);

具体代码片段如下：

private float[] calculatePosition(float centerX, float centerY, float radius, float degree) {
    //由于Math.sin(double a)中参数a不是度数而是弧度，所以需要将度数转化为弧度
    //而Math.toRadians(degree)的作用就是将度数转化为弧度
    //sin 一二正，三四负 sin（180-a）=sin(a)
    //扇形弧线中心点距离圆心的x坐标
    float x = (float) (Math.sin(Math.toRadians(degree)) * radius);
    //cos 一四正，二三负
    //扇形弧线中心点距离圆心的y坐标
    float y = (float) (Math.cos(Math.toRadians(degree)) * radius);
    //每段弧度的中心坐标(扇形弧线中心点相对于view的坐标)
    float startX = centerX + x * 2/ 3;
    float startY = centerY - y * 2/ 3;
    float[] position = new float[2];
    position[0] = startX;
    position[1] = startY;
    return position;
}

private void drawPie(Canvas canvas) {
    float centerX = getWidth() / 2F;
    float centerY = getHeight() / 2F;
    float radius = getHeight() / 4 > getWidth() / 2 ? getWidth() / 2 : getHeight() / 4;
    RectF oval = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);

    canvas.drawRect(oval,mPaint);

    for (int i = 0; i < 6; ++i) {

        float startAngle = i * 60;
        float sweepAngle = 60;

        canvas.drawArc(oval, startAngle, sweepAngle, true, mPaint);
        float textAngle = 90 + startAngle + sweepAngle / 2;
        float[] textPos = calculatePosition(centerX, centerY, radius, textAngle);
        mPaint.setTextSize(30F);
        canvas.drawText(String.valueOf(i + 1), textPos[0], textPos[1], mPaint);

        Paint p = createPaint(Color.WHITE);
        p.setStyle(Paint.Style.FILL);
        canvas.drawCircle(centerX, centerY, radius /3, p);

        Paint p1 = createPaint(Color.LTGRAY);
        p.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(centerX, centerY, radius / 3, p1);
    }

}

效果如下图：