[核心动画]关于CAShapeLayer的使用（画虚线和镂空效果）

虽然标题说的是核心动画，但是本篇内容并没有涉及到真正的动画，只是CAShapeLayer属于核心动画库里面的内容。CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。你指定诸如颜色和线宽等属性，用CGPath来定义想要绘制的图形，最后CAShapeLayer就自动渲染出来了。相比用Core Graphics直接向原始的CALyer的内容中绘制一个路径，CAShapeLayer具有渲染快速，使用内存高效，不会被图层边界裁掉，不会出现像素化等优点。

先看一个用CAShapeLayer画实线的例子，下面是效果图和重要源码：

- (void)showSolid{
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(175, 100)];
    [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [path moveToPoint:CGPointMake(150, 125)];
    [path addLineToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(125, 225)];
    [path moveToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(175, 225)];
    [path moveToPoint:CGPointMake(100, 150)];
    [path addLineToPoint:CGPointMake(200, 150)];
    
    //create shape layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 5;
    shapeLayer.lineJoin = kCALineJoinRound;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.path = path.CGPath;
    //add it to our view
    [self.containerView.layer addSublayer:shapeLayer];
}

由代码可以看出实现单色图形的显示，形状主要取决于CAShapeLayer 的path属性，代码的前半段主要是通过UIBezierPath（贝塞尔曲线）的对象画出人物形象的路线，然后将其结构体的值CGPath赋值给shapeLayer。shapeLayer对象可以调节路线图的其它属性包括颜色线宽等等。

类似的我们也可以做出圆角的效果如下：

CAShapeLayer画圆角.png

    //define path parameters
    CGRect rect = CGRectMake(50, 50, 100, 100);
    CGSize radii = CGSizeMake(20, 20);
    UIRectCorner corners = UIRectCornerTopRight | UIRectCornerBottomRight | UIRectCornerBottomLeft;
    //create path
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:radii];
    //create shape layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 5;
    shapeLayer.lineJoin = kCALineJoinRound;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.path = path.CGPath;
    //shapeLayer.lineDashPattern = @[@6, @10];//画虚线
    //add it to our view
    [self.containerView.layer addSublayer:shapeLayer];

这段代码遇上一段代码主要的不同是path绘制路径的方法不同，其调用UIRectCorner来会自圆角，corners 用来控制圆角的位置，radii用来控制圆角的半径。
如果在上述代码中添加代码（上述代码屏蔽部分）

shapeLayer.lineDashPattern = @[@6, @10];//画虚线

就可以得到虚线效果如下：

CAShapeLayer画虚线.png

lineDashPattern是一个数组，定义了虚线中实线部分和间隔部分分别的长度。

我们在iOS应用中做新手引导功能的时候，往往需要做到镂空效果，而且希望镂空的部分的位置和形状是可以被程序控制的，那么这个时候CAShapeLayer就发挥它的作用了，看下面一个例子：

CAShapeLayer镂空效果.png

可以看到图片上面半透明蒙层在柯南的脑袋部分有一个圆形的镂空效果，其实现主要代码如下：

- (void)showPierced{
    _headImage.hidden = NO;
    _maskView.hidden = NO;
    CGRect rc = CGRectMake(15, 30, 120, 120);   
    _maskView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
    CAShapeLayer *shape = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:_maskView.bounds];
    [path appendPath:[[UIBezierPath bezierPathWithRoundedRect:rc cornerRadius:100]bezierPathByReversingPath]];
    shape.path = path.CGPath;
    _maskView.layer.mask = shape;
}

这段代码与上面其它代码关键的区别是如下一句代码：

[path appendPath:[[UIBezierPath bezierPathWithRoundedRect:rc cornerRadius:100]bezierPathByReversingPath]];

两条路径（UIBezierPath）叠加，内嵌的路径调用bezierPathByReversingPath方法达到反转镂空的效果。相应的，如果我们改变内嵌路径所绘制的形状和位置，我们就可以得到不同的镂空形状的效果，这为适配不同屏幕尺寸引导中的镂空效果提供了很大的方便。

核心动画的内容很多，很复杂，这里只是讲了核心动画库的某一个类CAShapeLayer部分用法。这里推荐一本核心动画的网络书籍《iOS Core Animation: Advanced Techniques中文译本》。里面内容很多也比较全面，本篇文章中的部分代码有参考该书的部分章节。完整源码下载