iOS CAShapeLayer学习-运营小帮手

CAShapeLayer继承自CALayer，因此，可使用CALayer的所有属性。但是，CAShapeLayer需要和贝塞尔曲线配合使用才有意义。

关于UIBezierPath，请阅读文章：iOS UIBezierPth精讲

基本知识

看看官方说明：

/*TheshapelayerdrawsacubicBeziersplineinitscoordinatespace.
*
*ThesplineisdescribedusingaCGPathobjectandmayhavebothfill
*andstrokecomponents(inwhichcasethestrokeiscompositedover
*thefill).Theshapeasawholeiscompositedbetweenthelayer's
*contentsanditsfirstsublayer.
*/

上面只是部分说明内容，由于较长，只放一部分出来。这里是说CAShapeLayer是在其坐标系统内绘制贝塞尔曲线的。因此，使用CAShapeLayer需要与UIBezierPath一起使用。

它有一个path属性，而UIBezierPath就是对CGPathRef类型的封装，因此这两者配合起来使用才可以的哦！

@property(nullable)CGPathRefpath;

与drawRect比较

1、drawRect：属于CoreGraphics框架，占用CPU，性能消耗大，不建议重写

2、CAShapeLayer：属于CoreAnimation框架，通过GPU来渲染图形，节省性能。动画渲染直接提交给手机GPU，不消耗内存

这两者各有各的用途，而不是说有了CAShapeLayer就不需要drawRect。

温馨提示：drawRect只是一个方法而已，是UIView的方法，重写此方法可以完成我们的绘制图形功能。

关系

CAShapeLayer与UIBezierPath的关系：

1、CAShapeLayer中shape代表形状的意思，所以需要形状才能生效

2、贝塞尔曲线可以创建基于矢量的路径，而UIBezierPath类是对CGPathRef的封装

3、贝塞尔曲线给CAShapeLayer提供路径，CAShapeLayer在提供的路径中进行渲染。路径会闭环，所以绘制出了Shape

4、用于CAShapeLayer的贝塞尔曲线作为path，其path是一个首尾相接的闭环的曲线，即使该贝塞尔曲线不是一个闭环的曲线

画圆

效果图如下：

-(CAShapeLayer*)drawCircle{
CAShapeLayer*circleLayer=[CAShapeLayerlayer];
//指定frame，只是为了设置宽度和高度
circleLayer.frame=CGRectMake(0,0,200,200);
//设置居中显示
circleLayer.position=self.view.center;
//设置填充颜色
circleLayer.fillColor=[UIColorclearColor].CGColor;
//设置线宽
circleLayer.lineWidth=2.0;
//设置线的颜色
circleLayer.strokeColor=[UIColorredColor].CGColor;

//使用UIBezierPath创建路径
CGRectframe=CGRectMake(0,0,200,200);
UIBezierPath*circlePath=[UIBezierPathbezierPathWithOvalInRect:frame];

//设置CAShapeLayer与UIBezierPath关联
circleLayer.path=circlePath.CGPath;

//将CAShaperLayer放到某个层上显示
[self.view.layeraddSublayer:circleLayer];

returncircleLayer;
}

注意，我们这里不是放在-drawRect:方法中调用的。我们直接将这个CAShaperLayer放到了self.view.layer上，直接呈现出来。

我们创建一个CAShapeLayer，然后配置相关属性，然后再通过UIBezierPath的类方法创建一个内切圆路径，然后将路径指定给CAShapeLayer.path，这就将两者关联起来了。最后，将这个层放到了self.view.layer上呈现出来。

简单Loading效果

效果图类似这样（懒自己做图，就百度了一个）：

我们调用了上面这个画圆效果的代码：

-(void)drawHalfCircle{
self.loadingLayer=[selfdrawCircle];

//这个是用于指定画笔的开始与结束点
self.loadingLayer.strokeStart=0.0;
self.loadingLayer.strokeEnd=0.75;

self.timer=[NSTimerscheduledTimerWithTimeInterval:0.1
target:self
selector:@selector(updateCircle)
userInfo:nil
repeats:YES];
}

-(void)updateCircle{
if(self.loadingLayer.strokeEnd>1&&self.loadingLayer.strokeStart<1){
self.loadingLayer.strokeStart+=0.1;
}elseif(self.loadingLayer.strokeStart==0){
self.loadingLayer.strokeEnd+=0.1;
}

if(self.loadingLayer.strokeEnd==0){
self.loadingLayer.strokeStart=0;
}

if(self.loadingLayer.strokeStart>=1&&self.loadingLayer.strokeEnd>=1){
self.loadingLayer.strokeStart=0;
[self.timerinvalidate];
self.timer=nil;
}
}

我们要实现这个效果，是通过strokeStar和strokeEnd这两个属性来完成的，看看官方说明：

/*Thesevaluesdefinethesubregionofthepathusedtodrawthe
*strokedoutline.Thevaluesmustbeintherange[0,1]withzero
*representingthestartofthepathandonetheend.Valuesin
*betweenzeroandoneareinterpolatedlinearlyalongthepath
*length.strokeStartdefaultstozeroandstrokeEndtoone.Bothare
*animatable.*/

@propertyCGFloatstrokeStart;
@propertyCGFloatstrokeEnd;

这里说明了这两个值的范围是[0,1]，当strokeStart的值为0慢慢变成1时，我们看到路径是慢慢消失的。这里实现的效果并不好，因为不能一起循环着。不过，在这里学习的目的已经达到了，后面学习动画效果时，才专门学习它。