iOS 如何绘制饼状图

先来见识一下史上最无力的背打

前言

对于图形的绘制，我们可以用CoreGraphics中CGContext或者UIKit中UIBezierPath，前者是一个C语言类，功能强大，后者是基于前者封装的OC类，使用起来更方便，两者都可以在View的drawRect中直接绘制出想要的图形。但是我们这里为了后续操作方便，每个path都使用一个承载对象，CALayer跟CAShapeLayer都可以，显然后者更专业，专注形状绘制，那么就它了😀

主要对象及属性

• UIBezierPath，之前专门写了一篇对 UIBezierPath的理解与运用，这里我就不再说了。

• CAShapeLayer，专注绘制形状的图层，继承自CALayer，拥有CALayer所有特性，且增加了一些特有的属性。

    //路径，根据这个路径来绘制形状
    @property(nullable) CGPathRef path;
    //路径所包含区域的填充色
    @property(nullable) CGColorRef fillColor;
    //绘制路径的颜色
    @property(nullable) CGColorRef strokeColor;
    //路径绘制的开始值，默认为0，可以更改这个值来控制路径绘制的起始位置
    @property CGFloat strokeStart;
    //路径绘制的结束值，默认为1，可以更改这个值来控制路径绘制的结束位置
    @property CGFloat strokeEnd;
    //线宽
    @property CGFloat lineWidth;
  

怎么做？

要绘制一个饼状图，首先我们要了解饼状图的结构，我们前面提到过，可以直接在drawRect通过UIBezierPath拼接来画出一个饼状图，但是每个path没有单独的承载对象，不方便交互，所以才用CAShapeLayer，那么一个饼状图就是一个一个的CAShapeLayer按照顺序排列组合起来的，所以关键就在排列组合上面，下面提供两种思路：

1. 所有CAShapeLayer共用一个圆形的UIBezierPath，然后通过设置每一个CAShapeLayer的strokeStart跟strokeEnd属性来控制该layer在这个Path中所在的位置，这样就能轻松画出一个饼状图了。接下来我们就需要计算每一个CAShapeLayer的strokeStart跟strokeEnd，当我们拿到数据源的时候，先对数据进行排序处理，然后遍历数组，将strokeStart跟strokeEnd收尾相接即可，废话有点多，直接上代码：

   - (void)setDatas:(NSArray <NSNumber *>*)datas
             colors:(NSArray <UIColor *>*)colors{
        NSArray *newDatas = [self getPersentArraysWithDataArray:datas];
        CGFloat start = 0.f;
        CGFloat end = 0.f;
        UIBezierPath *piePath = [UIBezierPath bezierPathWithArcCenter:_center radius:_radius + Hollow_Circle_Radius startAngle:-M_PI_2 endAngle:M_PI_2*3 clockwise:YES];
        
        for (int i = 0; i < newDatas.count; i ++) {                
            NSNumber *number = newDatas[i];
            end =  start + number.floatValue;
            CAShapeLayer *pieLayer = [CAShapeLayer layer];
            pieLayer.strokeStart = start;
            pieLayer.strokeEnd = end;
            pieLayer.lineWidth = _radius*2 - Hollow_Circle_Radius;
            pieLayer.strokeColor = [colors.count > i?colors[i]:kPieRandColor CGColor];
            pieLayer.fillColor = [UIColor clearColor].CGColor;
            pieLayer.path = piePath.CGPath;
             
            [self.layer addSublayer:pieLayer];
            start = end;
        }
   }
   

   数据处理：

   /**
    将数据按降序排列，再计算出所占比例返回
   
    @param datas 原始数据
    @return 数据占比数组
   */
   - (NSArray *)getPersentArraysWithDataArray:(NSArray *)datas{
        NSArray *newDatas = [datas sortedArrayUsingComparator:^NSComparisonResult(id  _Nonnull obj1, id  _Nonnull obj2) {
            if ([obj1 floatValue] < [obj2 floatValue]) {
                return NSOrderedDescending;
            }else if ([obj1 floatValue] > [obj2 floatValue]){
                return NSOrderedAscending;
            }else{
                return NSOrderedSame;
            }
        }];
   
        NSMutableArray *persentArray = [NSMutableArray array];
        NSNumber *sum = [newDatas valueForKeyPath:@"@sum.floatValue"];
        for (NSNumber *number in newDatas) {
            [persentArray addObject:@(number.floatValue/sum.floatValue)];
        }
   
       return persentArray;
   }
   

2. 每个CAShapeLayer对应一个单独的UIBezierPath，我比较推荐使用这一种方式，因为在处理点击事件的时候，这种方式就可以判断point是否是在path内部，从而找到对应的layer，而第一种方式因为所有layer共用的一个UIBezierPath，以致于无法识别点击的point是属于哪一个layer，下面再看代码:

   - (void)setDatas:(NSArray <NSNumber *>*)datas
          colors:(NSArray <UIColor *>*)colors{
    
       NSArray *newDatas = [self getPersentArraysWithDataArray:datas];
       CGFloat start = -M_PI_2;
       CGFloat end = start;
       //之所以加上这个循环，也是考虑到如果多次调用，也不会重复创建layer
       while (newDatas.count > self.layer.sublayers.count) {
          XZMLayer *pieLayer = [XZMLayer layer];
          pieLayer.strokeColor = NULL;
          [self.layer addSublayer:pieLayer];
       }
    
       for (int i = 0; i < self.layer.sublayers.count; i ++) {
        
           XZMLayer *pieLayer = (XZMLayer *)self.layer.sublayers[i];
           if (i < newDatas.count) {
              pieLayer.hidden = NO;
              end =  start + M_PI*2*[newDatas[i] floatValue];
            
              UIBezierPath *piePath = [UIBezierPath bezierPath];
              [piePath moveToPoint:_center];
              [piePath addArcWithCenter:_center radius:_radius*2 startAngle:start endAngle:end clockwise:YES];
            
              pieLayer.fillColor = [colors.count > i?colors[i]:kPieRandColor CGColor];
              pieLayer.startAngle = start;
              pieLayer.endAngle = end;
              pieLayer.path = piePath.CGPath;
            
              start = end;
          }else{
              pieLayer.hidden = YES;
          }
      }
   }
   

   定义一个XZMLayer出来，也是为了方便我们添加属性

   @interface XZMLayer : CAShapeLayer
   
   @property (nonatomic,assign)CGFloat startAngle; //开始角度
   @property (nonatomic,assign)CGFloat endAngle;   //结束角度
   @property (nonatomic,assign)BOOL    isSelected; //是否已经选中
   
   @end
   

至此，我们的饼状图就基本已经画出来了，下面贴一张Demo图片

这个图太死板了，我们给它来点活力，添加动画！

添加动画

乍一看感觉不知从何下手，其实很简单！就是通过一个mask属性来控制显示区域，mask可以理解成一个背景层，当我们自定义一个mask的layer，layer默认是透明的，即背景是透明的，所以什么都看不到，当给mask赋值一个非透明任意背景颜色，则表现层的东西才能展示出来，所以我们只要通过给mask加一个绘制动画就可以了。

创建一个layer作为整个view.layer.mask

//通过mask来控制显示区域
_maskLayer = [CAShapeLayer layer];
UIBezierPath *maskPath = [UIBezierPath bezierPathWithArcCenter:_center radius:self.bounds.size.width/4.f startAngle:-M_PI_2 endAngle:M_PI_2*3 clockwise:YES];
//设置边框颜色为不透明，则可以通过边框的绘制来显示整个view
 _maskLayer.strokeColor = [UIColor greenColor].CGColor;
 _maskLayer.lineWidth = self.bounds.size.width/2.f;
 //设置填充颜色为透明，可以通过设置半径来设置中心透明范围
 _maskLayer.fillColor = [UIColor clearColor].CGColor;
 _maskLayer.path = maskPath.CGPath;
 _maskLayer.strokeEnd = 0;
 self.layer.mask = _maskLayer;

给这个maskLayer添加一个基础动画

- (void)stroke{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 1.f;
    animation.fromValue = [NSNumber numberWithFloat:0.f];
    animation.toValue = [NSNumber numberWithFloat:1.f];
    //禁止还原
    animation.autoreverses = NO;
    //禁止完成即移除
    animation.removedOnCompletion = NO;
    //让动画保持在最后状态
    animation.fillMode = kCAFillModeForwards;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [_maskLayer addAnimation:animation forKey:@"strokeEnd"];
}

来看看效果

交互

交互主要体现在用户点击上面，表现形式有很多种，具体根据需求来定，这里我来讲一下用户点击进行单元拆分的这么一个功能。首先我们要确定触摸的point是在哪一个模块，拿到这个模块之后再来拆分，也就是更改layer的position（中心点）属性值，默认是(0,0)，而拆分的方向是沿着一条过圆心以及layer的position的直线往外的方向，在设定偏移量之后，根据三角函数可以轻松求出新的position(x,y)，说起来有点绕口，来画个图就清楚了😀

这图画的我自己都怕😀，图上绿色的就是设定的偏移值，我们只要求出(x,y)就可以了，很简单吧，一个直角三角形，已知斜边跟角度，求另外两边长，三角函数啊，初中就学过的吧，哈哈！不废话了，上代码

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    CGPoint point = [touches.anyObject locationInView:self];
    
    [self upDateLayersWithPoint:point];
    
}

- (void)upDateLayersWithPoint:(CGPoint)point{
    //遍历查找点击的是哪一个layer
    for (XZMLayer *layer in self.layer.sublayers) {

        if (CGPathContainsPoint(layer.path, &CGAffineTransformIdentity, point, 0) && !layer.isSelected) {
            layer.isSelected = YES;

            //原始中心点为（0，0），扇形所在圆心、原始中心点、偏移点三者是在一条直线，通过三角函数即可得到偏移点的对应x，y。
            CGPoint currPos = layer.position;
            double middleAngle = (layer.startAngle + layer.endAngle)/2.0;
            CGPoint newPos = CGPointMake(currPos.x + KOffsetRadius*cos(middleAngle), currPos.y + KOffsetRadius*sin(middleAngle));
            layer.position = newPos;
            
        }else{

            layer.position = CGPointMake(0, 0);
            layer.isSelected = NO;
        }
    }
}

再来看效果

注意

• CAShapeLayer的lineWidth会影响整个path的大小，因为lineWidth是从边界往内外两边延伸的，比如lineWidth设置为10，那么就会往外扩大5，所以在设置半径的时候需要把线宽考虑进来。
• Demo在此，看到了就顺手点个赞呗！😀