iOS开发之CAShapeLayer初探
一、CAShapeLayer简介
CAShapeLayer属于QuartzCore框架，继承自CALayer。CAShapeLayer是在坐标系内绘制贝塞尔曲线的，通过绘制贝塞尔曲线，设置shape(形状)的path(路径)，从而绘制各种各样的图形以及不规则图形。因此，使用CAShapeLayer需要与UIBezierPath一起使用。
UIBezierPath类允许你在自定义的 View 中绘制和渲染由直线和曲线组成的路径.。你可以在初始化的时候直接为你的UIBezierPath指定一个几何图形。
通俗点就是UIBezierPath用来指定绘制图形路径，而CAShapeLayer就是根据路径来绘图的。
二、CAShapeLayer属性介绍
1、[CAShapeLayer layer].path
path
@property(nullable) CGPathRef path;
官方的解释是定义要呈现的形状的路径。如果路径扩展到层边界之外，只有当正常层屏蔽规则导致该条线时，它才会自动被剪辑到该层。赋值时，路径被复制。默认为null。（注意，虽然路径属性的动画，不隐将动画时创建的属性发生了变化。）
2、[CAShapeLayer layer].fillColor
fillColor
@property(nullable) CGColorRef fillColor;
官方解释是填充路径的颜色，或不需要填充。默认颜色为不透明的黑色。
3、[CAShapeLayer layer].fillRule
fillRule
@property(copy) NSString *fillRule;
官方解释是当在填充颜色的时候则就需要这种填充规则，值有两种，非零和奇偶数，但默认是非零值。
4、[CAShapeLayer layer].strokeColor
strokeColor
@property(nullable) CGColorRef strokeColor;
官方解释是设置描边色，默认无色。
5、[CAShapeLayer layer].strokeStart与[CAShapeLayer layer].strokeEnd
strokeStart与strokeEnd
@property CGFloat strokeStart;
@property CGFloat strokeEnd;
官方解释是这两个值被定义用于绘制边线轮廓路径的子区域。该值必须在[0,1]范围，0代表路径的开始，1代表路径的结束。在0和1之间的值沿路径长度进行线性插值。strokestart默认为0，strokeend默认为1。
6、[CAShapeLayer layer]. lineWidth与[CAShapeLayer layer].miterLimit
lineWidth与miterLimit
@property CGFloat lineWidth;
@property CGFloat miterLimit;
官方解释是lineWidth为线的宽度，默认为1；miterLimit为最大斜接长度。斜接长度指的是在两条线交汇处和外交之间的距离。只有lineJoin属性为kCALineJoinMiter时miterLimit才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用miterLimit属性。如果斜接长度超过miterLimit的值，边角会以lineJoin的“bevel”即kCALineJoinBevel类型来显示。
7、[CAShapeLayer layer]. lineCap与[CAShapeLayer layer].lineJoin
lineCap与lineJoin
@property(copy) NSString *lineCap;
@property(copy) NSString *lineJoin;
lineCap为线端点类型，值有三个类型，分别为kCALineCapButt 、kCALineCapRound 、kCALineCapSquare，默认值为Butt；lineJoin为线连接类型，其值也有三个类型，分别为kCALineJoinMiter、kCALineJoinRound、kCALineJoinBevel，默认值是Miter。
8、[CAShapeLayer layer]. lineDashPhase与[CAShapeLayer layer]. lineDashPattern
lineDashPhase与lineDashPattern
@property CGFloat lineDashPhase;
@property(nullable, copy) NSArray<NSNumber *> *lineDashPattern;
官方解释是lineDashPhase为线型模版的起始位置；lineDashPattern为线性模版，这是一个NSNumber的数组，索引从1开始记，奇数位数值表示实线长度，偶数位数值表示空白长度。
注：fillColor与strokeColor都是在有UIBezierPath参数配置的情况下才能发生作用
三、开始绘制
1、颜色说明---矩形为例
颜色说明
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = CGRectMake(375/2-50, 667/2-50, 100, 100);
//设置背景色
layer.backgroundColor = [UIColor cyanColor].CGColor;
//设置描边色
layer.strokeColor = [UIColor blackColor].CGColor;
//设置填充色
layer.fillColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:layer];
效果如图显示一个青色的矩形图：
绘图1
读者估计会纳闷，为啥设置的描边色与填充色没有作用，这是因为这两种颜色需要
UIBezierPath来绘制路径，然后使用CAShapeLayer进行渲染，所以接下来就就在上面的那段代码下简单的添加一个UIBezierPath类路径（温馨提示，layer的背景与这两种颜色最好不要共用）。
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
layer.path = path.CGPath;
绘图2
可以发现填充色与描边色有效果了。
2、绘制shape
//绘制矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
//绘制圆形路径
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
//绘制自带圆角的路径
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 100) cornerRadius:30];
//指定矩形某一个角加圆角（代码示例为左上角）
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 100) byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(50, 50)];
绘图3
3、绘制曲线（正弦曲线为例）
先来两张效果图：
绘图4
绘图5
说明：图4只是比图5多了填充色而已。
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIBezierPath *path = [self startPoint:CGPointMake(50, 300) endPoint:CGPointMake(200, 300) controlPoint:CGPointMake(125, 200)];
UIBezierPath *path1 = [self startPoint:CGPointMake(200, 300) endPoint:CGPointMake(350, 300) controlPoint:CGPointMake(275, 400)];
CAShapeLayer *layer = [self createShapeLayer:[UIColor orangeColor]];
layer.path = path.CGPath;
CAShapeLayer *layer1 = [self createShapeLayer:[UIColor greenColor]];
layer1.path = path1.CGPath;
}
/**
配置贝塞尔曲线
@param startPoint 起始点
@param endPoint 结束点
@param controlPoint 控制点
@return UIBezierPath对象
*/
- (UIBezierPath *)startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPoint];
[path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
return path;
}
- (CAShapeLayer *)createShapeLayer:(UIColor *)color
{
CAShapeLayer *layer = [CAShapeLayer layer];
// layer.frame = CGRectMake(0, 0, 50, 50);
//设置背景色
// layer.backgroundColor = [UIColor cyanColor].CGColor;
//设置描边色
layer.strokeColor = [UIColor blackColor].CGColor;
//设置填充色
layer.fillColor = color.CGColor;
[self.view.layer addSublayer:layer];
return layer;
}
4、曲线动画
1)、直线
直线动画
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 667/2)];
[path addLineToPoint:CGPointMake(375/2, 667/2)];
[path addLineToPoint:CGPointMake(300, 667/2)];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
//每次动画的持续时间
animation.duration = 5;
//动画起始位置
animation.fromValue = @(0);
//动画结束位置
animation.toValue = @(1);
//动画重复次数
animation.repeatCount = 100;
CAShapeLayer *layer = [self createShapeLayerNoFrame:[UIColor orangeColor]];
layer.path = path.CGPath;
layer.lineWidth = 2.0;
//设置图形的弧度
// layer.strokeStart = 0;
// layer.strokeEnd = 0;
[layer addAnimation:animation forKey:@"strokeEndAnimation"];
//注：由于UIBezierPath已经设置路径，所以动画的路径就不需要再次设置，只需要设置起始0与结束1就行，有需要可以设置动画结束后是否需要返回原位置。
2)、曲线
曲线动画.gif
UIBezierPath *path = [UIBezierPath bezierPath];
//起始点
[path moveToPoint:CGPointMake(50, 667/2)];
//结束点、两个控制点
[path addCurveToPoint:CGPointMake(330, 667/2) controlPoint1:CGPointMake(125, 200) controlPoint2:CGPointMake(185, 450)];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 5;
animation.fromValue = @(0);
animation.toValue = @(1);
animation.repeatCount = 100;
CAShapeLayer *layer = [self createShapeLayerNoFrame:[UIColor clearColor]];
layer.path = path.CGPath;
layer.lineWidth = 2.0;
[layer addAnimation:animation forKey:@"strokeEndAnimation"];
3)、圆形
笔者目前的一个项目中就用到了这个功能。直接贴一张效果图：
圆形动画.gif
其实实现效果很简单，只是把边线加粗了然后实现动画就可以了，还有一种思路就是画两个圆，截取中间的环，对大圆进行颜色渐变填充，小圆clear所有颜色再去实现动画也能达到这样的效果。
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(375/2-100, 667/2-100, 200, 200)];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 3.0;
animation.fromValue = @(0);
animation.toValue = @(1);
animation.repeatCount = 100;
CAShapeLayer *layer = [self createShapeLayerNoFrame:[UIColor clearColor]];
layer.path = path.CGPath;
layer.lineWidth = 25.0;
//圆的起始位置，默认为0
layer.strokeStart = 0;
//圆的结束位置，默认为1，如果值为0.75，则显示3/4的圆
layer.strokeEnd = 1;
[layer addAnimation:animation forKey:@"strokeEndAnimation"];
四、小结
iOS中画图类还有CoreGraphics，但笔者比较喜欢使用CAShapeLayer，且CAShapeLayer一般是与UIBezierPath连用的，如果有动画功能的话，还可以加上CABasicAnimation。这篇文章只是对CAShapeLayer和UIBezierPath类如何使用和主要功能实现做了简要的说明，还有一些项目中可能经常用到的圆形进度圈、下载圈，或者某些特效的实现，笔者可能在下一篇文章中简析封装步骤与代码实现，有需要的读者多多关注。
五、笔者V587
笔者已入坑，文章有不妥之处请大家指出，谢谢各位。劳动不易，转载须注明出处。
