ios开发之Quartz2D 四：画饼图

#import "PieView.h"

@implementation PieView



- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    NSArray *dataArray = @[@25,@25,@50];
    CGPoint center =  CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5);
    CGFloat radius = self.bounds.size.width * 0.5 - 10;
    CGFloat startA = 0;
    CGFloat angle = 0;
    CGFloat endA = 0;
    
    for (NSNumber *num in dataArray) {
        
        startA = endA;
        angle = num.intValue / 100.0 * M_PI * 2;
        endA = startA + angle;
        UIBezierPath  *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
        [[self randomColor] set];
        //添加一根线到圆心
        [path addLineToPoint:center];
        [path fill];
    }
    
}


-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    //重绘：1：drawRect方法不能手动去调用，否则不会自动生成与view有关的图形上下文 2：手动调用setNeedsDisplay，则系统会自动调用drawRect重绘，只要是系统自动调用的drawRect，都会自动生成与图形相关的上下文，fill，strokn都默认执行了绘图的几个步骤，要想实现绘图，需要自定义view，实现drawRect方法
    [self setNeedsDisplay];
}


//生成一个随机的颜色
- (UIColor *)randomColor {
    
    //arc4random_uniform:生成的随机数，范围为256，则生成的随机数范围是 0 -255
    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];
}





- (void)drawPie{
    //画第一个扇形
    CGPoint center =  CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5);
    CGFloat radius = self.bounds.size.width * 0.5 - 10;
    CGFloat startA = 0;
    CGFloat angle = 25 / 100.0 * M_PI * 2;//当计算除法的时候，若是用浮点数CGFloat修饰，就要除以一个100.0，后面有小数
    CGFloat endA = startA + angle;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    
    [[UIColor redColor] set];
    //添加一根线到圆心
    [path addLineToPoint:center];
    [path fill];//调用的stroken描点或是fill填充都默认开启了图形上下文，绘制路径，把路径添加到图形上下文中，将图形上下文渲染到view上，其中调用fill，会自动添加一条线形成闭环
    
    //画第二个扇形
    
    startA = endA;
    angle = 25 / 100.0 * M_PI * 2;
    endA = startA + angle;
    path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    [[UIColor greenColor] set];
    //添加一根线到圆心
    [path addLineToPoint:center];
    [path fill];
    
    
    startA = endA;
    angle = 50 / 100.0 * M_PI * 2;
    endA = startA + angle;
    path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    [[UIColor blueColor] set];
    //添加一根线到圆心
    [path addLineToPoint:center];
    [path fill];

}


@end

  第一步, 获取上下文

        第二步,拼接路径 ,绘制第一个扇形

         获取上下文

         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.