04-画饼图

04-画饼图

    第一步, 获取上下文
    第二步,拼接路径 ,绘制第一个扇形
     获取上下文
     CGContextRef ctx =  UIGraphicsGetCurrentContext();
     CGPoint center = CGPointMake(125, 125);
     CGFloat radius = 100;
     CGFloat startA = 0;
     CGFloat endA = 0;
     CGFloat angle = 25 / 100.0 * M_PI * 2;
     endA = startA + angle;
     拼接路径
     UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center 
                                                          radius:radius 
                                                          startAngle:startA 
                                                          endAngle:endA 
                                                          clockwise:YES];
     添加一根线到圆心
     [path addLineToPoint:center];
     把路径添加到上下文
     CGContextAddPath(ctx, path.CGPath);
     把上下文渲染到View
     CGContextFillPath(ctx);

     注意点: CGFloat angle = 25 / 100.0 * M_PI * 2; 
            100.0一定要加一个.0

    绘制第二个扇形
    一样的, 把路径描述第二个扇形就好了
    直接来个path =
    让Path指针重新指向一个新的对象.也就是把指针重复利用了
    之前的那个对象已经用完了,已经添加到了上下文当中了.

     第二个扇形
     startA = endA;
     angle = 25 / 100.0 * M_PI * 2;
     endA = startA + angle;
     path = [UIBezierPath bezierPathWithArcCenter:center
                                             radius:radius 
                                             startAngle:startA 
                                             endAngle:endA 
                                             clockwise:YES];
     [path addLineToPoint:center];
     把二个路径添加到上下文
     CGContextAddPath(ctx, path.CGPath);
     把上下文渲染到View
     CGContextFillPath(ctx);


    添加第二个扇形之后, 发现它们的颜色都一样,想要修改它的颜色
    在下面再写一个
    [[UIColor greenColor] set];
    下面的一个颜色把之前的东西给覆盖了.
    解决办法, 让它渲染两次

    第三个扇形,把第二个拷贝一下就好了


    总结:
        有没有发现在画三个扇形用太多代码了,
        里面有很多代码相似.
        是不是可以把代码给抽一下
        可以用便利数组的的方式
        发现就两个地方变了, 一个数字变了, 一个颜色变了,所以我们就把不同的作为参数抽取方法.


    抽取代码:
        假设他给一组数据
        NSArray datas =  @[@25,@25,@50];
        把数组遍历出来
     NSArray *datas =  @[@25,@25,@50];
     CGPoint center = CGPointMake(125, 125);
     CGFloat radius = 100;
     CGFloat startA = 0;
     CGFloat angle = 0;
     CGFloat endA = 0;

     for (NSNumber *number in datas) {
     startA = endA;
     angle = number.intValue / 100.0 * M_PI * 2;
     endA = startA + angle;

     描述路径
     UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center 
                                          radius:radius
                                          startAngle:startA
                                          endAngle:endA
                                          clockwise:YES];

     [path addLineToPoint:center];
     [[self randomColor] set];
     [path fill];

     }

     - (UIColor *)randomColor{
     CGFloat r = arc4random_uniform(256)/ 255.0;
     CGFloat g = arc4random_uniform(256)/ 255.0;
     CGFloat b = arc4random_uniform(256)/ 255.0;
     return [UIColor colorWithRed:r green:g blue:b alpha:1];

     }

    随机颜色:alpha通道它的取值范围是0-255;
            OC里面的取值范围只能是0到1,把它 / 255.0就让它到这个范围了,
            arc4random_uniform(256)随机产生 0 - 255的数.
            颜色通道它的取值范围是0 到 255.
            所以说要把0 到 255转换成0 到 1
            直接是  0 ~ 255 / 255.0就可以了.
            刚好是255就是255 / 255.0 就是1,
            刚才是0 就是 0 / 255.0 就是0.

完整代码:

#import "pieView.h"

@implementation pieView


- (void)drawRect:(CGRect)rect {
    // 所有的数据
    NSArray *date = @[@20,@30,@10,@40,@38];
    //描述路径
    CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
    CGFloat radious = rect.size.width * 0.5 - 10;
    CGFloat startA = 0;
    CGFloat endA = 0;
    CGFloat angle = 0;
    //遍历数组
    for (NSNumber *num in date) {
        startA = endA;
        angle = num.intValue / 138.0 * M_PI * 2;
        endA = startA + angle;
        //设置路径
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radious startAngle:startA endAngle:endA clockwise:YES];
        //连接中心点
        [path addLineToPoint:center];
        //产生随机颜色
        [[self randomColor] set];
        //填充区域
        [path fill];
    }
}

//随机产生颜色
- (UIColor *)randomColor{
    //产生红,绿,蓝
    CGFloat r = arc4random_uniform(256) / 255.0;
    CGFloat g = arc4random_uniform(256) / 255.0;
    CGFloat b = arc4random_uniform(256) / 255.0;

    return  [UIColor colorWithRed:r green:g blue:b alpha:1];
}

//点击view时颜色改变
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //重绘
    [self setNeedsDisplay];
    
}

@end

效果图: