这回来画饼形图,进一步属性API调用
在此之前,先理清楚Canvas的坐标系,在Android里,Canvas就相当于一个画布,而屏幕则是一个窗口,窗口移动到画布上的部分,就是我们能够看到的部分。
先看个图:
图上已经很明显了,Canvas是一块画布,而屏幕(理解为View更合适)这是可以移动的显示部分,而默认Canvas的原点是屏幕的左上角。
基于这些,再介绍下Canvas的坐标移动,就拿canvas.translate()来举例,如果canvas.translate(100,100)就是移动Canvas的X、Y轴100个像素,具体如图:
从图上可以清晰看出,Canvas移动后,坐标原点已经不在屏幕左上角了,所以,现在的canvas使用的坐标,在屏幕上的位置(x,y),相对于之前的(x0+100,y0+100),在屏幕上显示的位置都默认加100。
进入正题,看如何画饼图:
public class PieChart extends View {
private final static float RADIUS = UiUtils.dpToPixel(150);
private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
private final static float POINT_LEN = UiUtils.dpToPixel(5);
private RectF bounds = new RectF();
private int[] angles = {60, 100, 120, 80};
private int[] colors = {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW};
public PieChart(Context context, @Nullable AttributeSet attrs) {
// 给系统使用的
super(context, attrs);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 确定椭圆的范围
bounds.set(getWidth() / 2 - RADIUS, getHeight() / 2 - RADIUS, getWidth() / 2 + RADIUS, getHeight() / 2 + RADIUS);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int currentArgs = 0;
for (int i = 0; i < angles.length; i++) {
paint.setColor(colors[i]);
canvas.save();
// 对canvas进行一定的偏移
// 以具体的角的中点,向外偏移一小段距离
// 注意:sin和cos的值都是小于1的,千万不要强行转换为int,会把计算的结果全部抹掉
canvas.translate((float) Math.cos(Math.toRadians(currentArgs + angles[i]/2))*POINT_LEN,
(float) Math.sin(Math.toRadians(currentArgs + angles[i]/2))*POINT_LEN);
canvas.drawArc(bounds, currentArgs, angles[i], true, paint);
canvas.restore();
currentArgs += angles[i];
}
}
}
主要地方都加上了注释,现在看下效果图: