写点什么

自定义 View:如何绘制一个饼图

用户头像
Changing Lin
关注
发布于: 刚刚
自定义View:如何绘制一个饼图

1.知识点

  • 用 drawArc() 绘制扇形

  • 用 Canvas.translate() 来移动扇形,并用 Canvas.save() 和 Canvas.restore() 来保存和恢复位置

  • 用三角函数 cos 和 sin 来计算偏移

2.三角函数计算原理


  • 已知定理:cos(x) = sin(x+π/2)

  • 已知定理:cos(x) = -cos(x+π),sin(x) = -sin(x+π)

  • 也就是说,偏移量的计算,实际上是 求角 1 的余弦 dx 和正弦 dy;角 1 刚好等于 (红角+蓝角+绿角/2)-180°,因此,cos(角 1) = -cos(红角+蓝角+绿角/2)

  • 由于 Android 系统中的坐标系与数学坐标系相反,符号刚好相反,因此,dx = cos(红角+蓝角+绿角/2),dy = sin(红角+蓝角+绿角/2)

3.代码

package com.example.hellojnicallback;
import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.RectF;import android.util.AttributeSet;import android.view.View;
import androidx.annotation.Nullable;
public class PieChart extends View { Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); private static final float RADIUS = Util.dp2px(150); private static final float LENGTH = Util.dp2px(25); private static final float PULLED_OUT_INDEX = 0; RectF bounds = new RectF();
private static final int[] angles = {60, 100, 120, 80}; private static final int[] colors = {Color.RED, Color.BLUE, Color.GREEN, Color.YELLOW};
@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh);
paint.setColor(Color.RED); bounds.set(getWidth()/2-RADIUS, getHeight()/2-RADIUS, getWidth()/2+RADIUS, getHeight()/2+RADIUS); }
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas);
int currentAngel = 0; for (int i = 0; i < angles.length; i++) { paint.setColor(colors[i]); canvas.save(); // 记录绘制前的位置信息 if (i == PULLED_OUT_INDEX) { float dx = (float) (LENGTH * Math.cos(Math.toRadians(currentAngel+angles[i]/2.0f))); float dy = (float) (LENGTH * Math.sin(Math.toRadians(currentAngel+angles[i]/2.0f))); canvas.translate(dx, dy); } canvas.drawArc(bounds, currentAngel, angles[i], true, paint); canvas.restore(); // 恢复绘制前的信息 currentAngel += angles[i]; } }
public PieChart(Context context, @Nullable AttributeSet attrs) { super(context, attrs); }}
复制代码


发布于: 刚刚阅读数: 2
用户头像

Changing Lin

关注

获得机遇的手段远超于固有常规之上~ 2020.04.29 加入

我能做的,就是调整好自己的精神状态,以最佳的面貌去面对那些未曾经历过得事情,对生活充满热情和希望。

评论

发布
暂无评论
自定义View:如何绘制一个饼图