自定义View示例-02 饼图-01

自定义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地址