先来见识一下史上最无力的背打
OK！进入正题，哈哈😀
前言
对于图形的绘制，我们可以用
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按照顺序排列组合起来的，所以关键就在排列组合上面，下面提供两种思路：
-
所有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; } -
每个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在此，看到了就顺手点个赞呗！😀
