iOS quartzCore学习之CAShapeLayer

参考：http://blog.csdn.net/hdfqq188816190/article/details/51361011

CAShapeLayer 是 CALayer 的子类，但是比 CALayer 更灵活，可以画出各种图形，当然，你也可以使用其他方式来画，随你。

首先CAShapeLayer 自身有path ，fillColor ,fillRule ,strokeColor ,strokeStart , strokeEnd , lineWidth（线宽，用点表示单位） ,miterLimit ,lineCap（线条结尾的样子） , lineJoin（线条之间的结合点的样子）, lineDashPhase 和lineDashPattern 这几个属性。

杂谈

在 CAShapeLayer 中，也可以像 CALayer 一样指定它的 frame 来画，就像这样：

- (void)setShapRect{
    CAShapeLayer* shaper = [CAShapeLayer layer];
    shaper.backgroundColor = [UIColor blackColor].CGColor;
    shaper.frame = CGRectMake(100, 100, 100, 100);
    [self.view.layer addSublayer:shaper];
}

然后你就会得到如图这样的黑色矩形

 

2.CAShapeLayer 有一个神奇的属性 path 用这个属性配合上 UIBezierPath 这个类就可以达到超神的效果。

UIBezierPath 顾名思义，这是用贝塞尔曲线的方式来构建一段弧线，你可以用任意条弧线来组成你想要的形状，比如，你想用它来和上面一样画一个矩形，那就可以这样子来做：

- (void)setShapRect2{
    UIBezierPath* path = [UIBezierPath bezierPathWithRect: CGRectMake(100, 100, 100, 100)];
    CAShapeLayer* shaper = [CAShapeLayer layer];
    shaper.fillColor = [UIColor blackColor].CGColor;
    shaper.path = path.CGPath;
    [self.view.layer addSublayer:shaper];
}

要注意的是，这里就不要用backgroundColor 这个属性了，而要使用 fillColor 和 strokeColor ，前者代表设置这个 Layer 的填充色，后者代表设置它的边框色

玩一下UIBezierPath

在说回 UIBezierPath ，在 UIBezierPath 的 init 方法中，就有很多方便你画各种图形的方法，比如你可以画一个带圆角的图形

代码

   UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 100, 100) cornerRadius:20 ];
    CAShapeLayer* shaper = [CAShapeLayer layer];
    shaper.fillColor = [UIColor blackColor].CGColor;
    shaper.strokeColor = [UIColor redColor].CGColor;
    shaper.path = path.CGPath;
    [self.view.layer addSublayer:shaper];

效果如下；

指定半角

代码如下：

UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 100, 100) byRoundingCorners:UIRectCornerTopLeft|UIRectCornerBottomRight cornerRadii:CGSizeMake(30, 30)];
    CAShapeLayer* shaper = [CAShapeLayer layer];
    shaper.fillColor = [UIColor blackColor].CGColor;
    shaper.strokeColor = [UIColor redColor].CGColor;
    shaper.path = path.CGPath;
    [self.view.layer addSublayer:shaper];

效果如下：

 

还可以指定起始角和半径画圆

代码如下：

    UIBezierPath* path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 200) radius:50 startAngle:0 endAngle:M_PI clockwise:YES];
    CAShapeLayer* shaper = [CAShapeLayer layer];
    shaper.fillColor = [UIColor blackColor].CGColor;
    shaper.strokeColor = [UIColor redColor].CGColor;
    shaper.path = path.CGPath;
    [self.view.layer addSublayer:shaper];

效果如下：

怎么画曲线

贝塞尔曲线的画法是由起点、终点、控制点三个参数来画的，为了解释清楚这个点，我写了几行代码来解释它

- (void)setLine1{
    CGPoint startPoint = CGPointMake(50, 300);
    CGPoint endPoint = CGPointMake(300, 300);
    CGPoint controlPoint = CGPointMake(170, 200);
    
    CALayer* layer1 = [CALayer layer];
    layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);
    layer1.backgroundColor = [UIColor redColor].CGColor;
    
    CALayer* layer2 = [CALayer layer];

    layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5);
    layer2.backgroundColor = [UIColor redColor].CGColor;
    CALayer* layer3 = [CALayer layer];

    layer3.frame = CGRectMake(controlPoint.x, controlPoint.y, 5, 5);
    layer3.backgroundColor = [UIColor redColor].CGColor;
    
    UIBezierPath* path = [UIBezierPath bezierPath];
    CAShapeLayer* layer = [CAShapeLayer layer];
    
    [path moveToPoint:startPoint];
    [path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
    
    
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor blackColor ].CGColor;
    
    [self.view.layer addSublayer:layer];
    [self.view.layer addSublayer:layer1];
    [self.view.layer addSublayer:layer2];
    [self.view.layer addSublayer:layer3];
}

效果如下；

再来说说 CAShapeLayer

CAShapeLayer 是个神奇的东西，给它一个path它就能变成你想要的形状，它还有很多可以玩的地方。综合使用可以组合成不同的动画，比如下面这样

这三个动画就是使用了 strokeEnd、strokeStart和lineWidth 三个属性，第一个动画用了strokeEnd这个属性的值范围是0-1，动画显示了从0到1之间每一个值对这条曲线的影响，strokeStart的方法则是相反的，如果把这两个值首先都设置成0.5然后慢慢改变成0和1的时候就会变成第二个动画，配合lineWidth则曲线会慢慢变粗，这里的很多属性都是支持动画的

代码如下：

- (void) animation{
    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = @0;
    animation.toValue = @1;
    animation.duration = 2;
    [self.shapeLayer  addAnimation:animation forKey:@""];
}

- (void) animation2{
    self.shapeLayer.strokeStart = 0.5;
    self.shapeLayer.strokeEnd = 0.5;
    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = @0.5;
    animation.toValue = @1;
    animation.duration = 2;
    
    CABasicAnimation* animation1 = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    animation1.fromValue = @0.5;
    animation1.toValue = @0;
    animation1.duration = 2;
    [self.shapeLayer  addAnimation:animation1 forKey:@""];
    [self.shapeLayer  addAnimation:animation forKey:@""];
}

- (void) animation3{
    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"lineWidth"];
    animation.fromValue = @1;
    animation.toValue = @10;
    animation.duration = 2;
    [self.shapeLayer  addAnimation:animation forKey:@""];
}