自定义View 简单实践-02 饼图-01
1.成品效果
image.png
2.思路分析
这个效果比较简单，我们只需要在同一个矩形范围内，画出若干个指定角度的扇形，最后将需要拉出来的扇形重新指定圆心位置，然后再重新画出拉出的扇形。
3.具体实现
3.1 在同一个矩形范围内画出扇形。
设置画笔
private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
设置扇形半径
private static final float RADIOUS = DpToPxUtil.dp2px(160);
设置画扇形的矩形范围
private RectF bounds = new RectF();
设置各个扇形角度的数组
private int[] angles = {60,45,60,30,90,60,15};
设置各个扇形的颜色值数组
private int[] colors = {Color.parseColor("#CE0000"),Color.parseColor("#006030"),Color.parseColor("#4169E1"),Color.parseColor("#A2CD5A"),Color.parseColor("#CD00CD"),Color.parseColor("#000079"),Color.parseColor("#B3EE3A")};
设置画扇形的矩形范围
bounds.set(getWidth()/2 - RADIOUS,getHeight()/2 - RADIOUS,getWidth()/2 + RADIOUS,getHeight()/2 + RADIOUS);
onDraw()方法中画扇形
//起始角度
private int currentAngle = 0;
//画扇形
for (int i = 0; i < angles.length; i++){
//设置画笔颜色
paint.setColor(colors[i]);
canvas.save();
canvas.drawArc(bounds,currentAngle,angles[i],true,paint);
canvas.restore();
currentAngle += angles[i];
}
image.png
3.2 将需要拉出的扇形重新计算圆心位置，然后重新画出扇形。
这里最重要的是，我们要确定需要拉出来的扇形的圆心位置
这里我们需要用到三角函数的姿势了。这里具体的操作是将需要拉出的扇形，沿着他的角度的中线所在的方向，将画布（Canvas）平移一定的距离，这个距离的计算是将这块扇形的中线（长度为你想要拉伸的距离）做正弦和余弦，余弦为拉伸的x轴的长度，正弦为拉伸的y轴的长度。
//绘制扇形
if(i == PULLED_OUT_INDEX){
canvas.translate((float)Math.cos(Math.toRadians(currentAngle + angles[i]/2))*LENGTH,(float) Math.sin(Math.toRadians(currentAngle + angles[i]/2))*LENGTH);
}
这里LENGTH为我们需要拉伸的偏移量
private static final float LENGTH = DpToPxUtil.dp2px(20);
currentAngle + angles[i]/2 为我们需要拉伸的扇形的中线的角度
Math.cos(Math.toRadians(currentAngle + angles[i]/2)) 为我们需要拉伸的扇形的中线的角度的的余弦，然后再乘以LENGTH就得出我们需要平移的横坐标的值。
Math.sin(Math.toRadians(currentAngle + angles[i]/2))*LENGTH为我们需要拉伸的扇形的中线的角度的的正弦，然后再乘以LENGTH就得出我们需要平移的纵坐标的值。
我们得出需要平移的横坐标跟纵坐标的值的后，然后在Canvas.translate()平移我们的画布既可。
效果图：
image.png
完工：你说气人不！！！
image.png
Demo：CMViewDemo Github地址
