CAShapLayer + UIBezierPath

使用shapelayer 画图步骤

1、新建UIBezierPath对象bezierPath
2、新建CAShapeLayer对象caShapeLayer
3、将bezierPath的CGPath赋值给caShapeLayer的path，即caShapeLayer.path = bezierPath.CGPath
4、把CAShapeLayer添加到某个显示该图形的layer中

shapelayer 动画效果的几种实现方式

看果冻效果来更好的理解
1、使用coreanimation动画
- CAKeyframeAnimation。
- CABasicAnimation
2、修改bezierPath路径：
- 使用CADisplayLink
- 使用pan手势
3、pan

创建bezierPath 曲线

 UIBezierPath *path = [[UIBezierPath alloc] init];
   [path moveToPoint:CGPointMake(0, self.bounds.size.height * 0.5)];
   [path addLineToPoint:CGPointMake(15, 0)];
   [path  addLineToPoint:CGPointMake(self.bounds.size.width, 0)];
   [path addLineToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height)];
   [path addLineToPoint:CGPointMake(15, self.bounds.size.height)];
   [path closePath];

创建shapeLayer

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
        shapeLayer.fillColor = [[UIColor brownColor] colorWithAlphaComponent:0.3].CGColor;
        shapeLayer.path = path.CGPath;
        
        [self.layer addSublayer:shapeLayer];

加动画

CABasicAnimation *animation = [[CABasicAnimation alloc] init];
        animation.keyPath = @"strokeStart";
        animation.fromValue = @0;
        animation.toValue = @1;
        animation.repeatCount = MAXFLOAT;
        animation.duration = 1;
        animation.timingFunction= [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];;
        [shapeLayer addAnimation:animation forKey:nil];

也可以使用加动画组

shaplayer 的属性 ：strokeStart strokeEnd

CABasicAnimation 动态改变 这两个属性值，可以实现划线的过程动画

mask遮罩

使用shaplayer随意修改view的圆角

UIView *redView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];

redView.center = self.view.center;

redView.backgroundColor = [UIColor redColor];

UIRectCorner rectCorner = UIRectCornerTopLeft|UIRectCornerTopRight;

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:redView.bounds byRoundingCorners:rectCorner cornerRadii:CGSizeMake(40, 40)];

CAShapeLayer *shaperLayer = [CAShapeLayer layer];

shaperLayer.path = path.CGPath;

redView.layer.mask = shaperLayer;

[self.view addSubview:redView];

使用shaplayer修改view遮罩

CAShapeLayer *shapeLayer = [[CAShaperLayer alloc] init];
UIBezierPath *path = [UIBezierPath alloc] init];
......
shapeLayer.path = path.CGPath;
view.layer.mask = shapeLayer;
//设置shapeLayer动画，可以实现view逐渐显示的效果

使用shapelier 画各种线

画三角形

- (void)drawTriangle {

    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPath];
    //绘制三角形的三个顶点，自己算，能连成三角形就行啦！
    [path moveToPoint:CGPointMake(50, 30)];
    [path addLineToPoint:CGPointMake(110, 30)];
    [path addLineToPoint:CGPointMake(80, 60)];
    //连接三个点
    [path closePath];
    layer.path = path.CGPath;
    //填充图形颜色
    layer.fillColor = [UIColor clearColor].CGColor;
    //图形变现颜色
    layer.strokeColor = [UIColor blackColor].CGColor;
    //self.drawView,自己定义一个View，继承UIView
    [self.drawView.layer addSublayer:layer];
    //不加动画就会直接出现三角形，这里我们加了动画，请看下面的动画方法！！！
    [self drawAnimationType:self.animationType layer:layer];
}

画圆

- (void)drawCircular {

    //第一种
    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 100, 100) cornerRadius:50];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor blackColor].CGColor;
    [self.drawView.layer addSublayer:layer];

    //第二种
    CAShapeLayer *layer = [CAShapeLayer layer];
    /*
     *param1:图形大小
     *param2:圆角的位置
     *param3:圆角的大小
     */
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake((kScreenWidth-40)/2-50, 30, 100, 100) byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(30, 30)];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor blackColor].CGColor;
    [self.drawView.layer addSublayer:layer];

    //第三种
    CAShapeLayer *layer2 = [CAShapeLayer layer];
    /*
     *param1:圆的中心点
     *param2:圆的半径
     *param3:开始画圆的角度
     *param4:结束画圆的角度
     *param5:YES为顺时针画圆，NO为逆时针画圆
     */
    UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:30 startAngle:0.0 endAngle:M_PI * 2 clockwise:NO];
    layer2.path = path2.CGPath;
    layer2.fillColor = [UIColor clearColor].CGColor;
    layer2.strokeColor = [UIColor blackColor].CGColor;
    [self.drawView.layer addSublayer:layer2];

    //椭圆
    CAShapeLayer *layer3 = [CAShapeLayer layer];
    UIBezierPath *path3 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(250, 30, 80, 50)];
    layer3.path = path3.CGPath;
    layer3.fillColor = [UIColor clearColor].CGColor;
    layer3.strokeColor = [UIColor blackColor].CGColor;
    [self.drawView.layer addSublayer:layer3];
}

画单点曲线

- (void)drawCurve {

    //贝塞尔曲线由起点，终点，控制点三个参数控制绘制，这里把三个参数的坐标提出来写，更加直观
    CGPoint startPoint = CGPointMake(20, 100);
    CGPoint endPoint = CGPointMake(300, 100);
    CGPoint controlPoint = CGPointMake(160, 10);

    //这里把三个点都绘制出来了，以便观察
    CALayer *layer1 = [CALayer layer];
    layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);
    layer1.backgroundColor = [UIColor blackColor].CGColor;

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

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

    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:startPoint];
    [path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor blackColor].CGColor;
    [self.drawView.layer addSublayer:layer];
    [self.drawView.layer addSublayer:layer1];
    [self.drawView.layer addSublayer:layer2];
    [self.drawView.layer addSublayer:layer3];

    [self drawAnimationType:self.animationType layer:layer];
}

画双点曲线

- (void)drawCurveWithTwoDot {

    //贝塞尔曲线由起点，终点，控制点三个参数控制绘制，这里把三个参数的坐标提出来写，更加直观
    CGPoint startPoint = CGPointMake(20, 100);
    CGPoint endPoint = CGPointMake(300, 100);
    CGPoint controlPoint1 = CGPointMake(90, 10);
    CGPoint controlPoint2 = CGPointMake(230, 190);

    CALayer *layer1 = [CALayer layer];
    layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);
    layer1.backgroundColor = [UIColor clearColor].CGColor;//给layer1赋值颜色，以便观察，项目中一般用透明色即可！
    CALayer *layer2 = [CALayer layer];
    layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5);
    layer2.backgroundColor = [UIColor clearColor].CGColor;

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

    CALayer *layer4 = [CALayer layer];
    layer4.frame = CGRectMake(controlPoint2.x, controlPoint2.y, 5, 5);
    layer4.backgroundColor = [UIColor clearColor].CGColor;

    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:startPoint];
    [path addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor blackColor].CGColor;
    [self.drawView.layer addSublayer:layer];
    [self.drawView.layer addSublayer:layer1];
    [self.drawView.layer addSublayer:layer2];
    [self.drawView.layer addSublayer:layer3];
    [self.drawView.layer addSublayer:layer4];

    [self drawAnimationType:self.animationType layer:layer];
}

画多边形

- (void)drawPolygonWithNum:(CGFloat)num {

    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPath];
    CGFloat radius = 50;//设置一个半径
    CGFloat centerX = (kScreenWidth-20)/2;
    CGFloat centerY = 100;

    if (num < 3) {

        num = 3;
    }
    [path moveToPoint:CGPointMake(centerX+radius, centerY)];
    NSLog(@"%f",sin(2*M_PI*1/num));
    //这里涉及到一个算法，大家看看！！！
    for (int i = 1; i <= num; i ++) {

        [path addLineToPoint:CGPointMake(centerX+radius*cos(2*M_PI*i/num), centerY+radius*sin(2*M_PI*i/num))];
        layer.path = path.CGPath;
    }
    [path closePath];
    layer.strokeColor = [UIColor blackColor].CGColor;
    layer.fillColor = [UIColor clearColor].CGColor;
    [self.drawView.layer addSublayer:layer];

    [self drawAnimationType:self.animationType layer:layer];
}