UIBezierPath

一：配合drawRect使用

• 这个用法局限性比较大，只能添加到UIView上
• 很多属性和CAShapeLayer一致，就不一一介绍了

- (void)drawRect:(CGRect)rect {
    // 画笔颜色设置
    [[UIColor redColor] set];
    // 创建路径
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 100, 100)];
    // 填充
    [path fill];
    // 绘制
    [path stroke];
}

二：配合CAShapeLayer使用

1、CAShapeLayer的使用

CAShapeLayer *layer = [CAShapeLayer layer];
// 填充颜色
layer.fillColor = [UIColor clearColor].CGColor;
//    使用appendPath添加多个path后，kCAFillRuleEvenOdd属性会实现偶消奇不消的效果
layer.fillRule = kCAFillRuleNonZero;
// 绘制颜色
layer.strokeColor = [UIColor redColor].CGColor;
//    封口样式
/*
 kCALineCapButt, // 无端点
 kCALineCapRound, // 圆形端点
 kCALineCapSquare // 方形端点（样式上和kCGLineCapButt是一样的，但是比kCGLineCapButt长一点）
 */
//    layer.lineCap = kCALineCapButt;
//    连接样式
/*
 kCALineJoinMiter, // 尖角
 kCALineJoinRound, // 圆角
 kCALineJoinBevel // 缺角
 */
//    layer.lineJoin = kCALineJoinMiter;
//    miterLimit为最大斜接长度。斜接长度指的是在两条线交汇处和外交之间的距离。只有lineJoin属性为kCALineJoinMiter时miterLimit才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用miterLimit属性。如果斜接长度超过miterLimit的值，边角会以lineJoin的“bevel”即kCALineJoinBevel类型来显示。
//    layer.miterLimit = 1.42;
//    线宽
layer.lineWidth = 10;
//    线条的起始位置(0~1，对应于path而言，默认为0)
layer.strokeStart = 0;
//    线条的结束位置(0~1，对应于path而言，默认为1)
layer.strokeEnd = 1;
//    虚线数组(lineCap要使用kCALineCapButt)
layer.lineDashPattern = @[@30, @20,@10, @5,@1];
//    绘制的虚线显示在屏幕上的起点
//    如上面这组数据，应是画一条30实线20空白10实线5空白...；如果lineDashPhase设置为40，则起始变成（20-10）空白10实线5空白...
layer.lineDashPhase = 40;
//    配合使用的UIBezierPath路径
layer.path = [self circlePath].CGPath;
[self.view.layer addSublayer:layer];

2、UIBezierPath的使用

//    矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 100, 100)];
//    椭圆(包括圆)
UIBezierPath *path1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];


//   通过已有路径创建路径
UIBezierPath *path2 = [UIBezierPath  bezierPathWithCGPath:path.CGPath];

//    圆角矩形
UIBezierPath *path3 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(110, 100, 150, 100) cornerRadius:30];

//    指定位置圆角矩形
UIBezierPath *path4 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(110, 100, 150, 100) byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight cornerRadii:CGSizeMake(30, 30)];

//    曲线
//    clockwise：是否顺时针绘制
UIBezierPath *path5 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:50 startAngle:0 endAngle:M_PI clockwise:YES];

//    一级贝塞尔曲线
UIBezierPath *path6 = [UIBezierPath bezierPath];
//    起点
[path6 moveToPoint:CGPointMake(100, 100)];
/*
 ToPoint： 终点
 controlPoint： 控制点
 */
[path6 addQuadCurveToPoint:CGPointMake(150, 100) controlPoint:CGPointMake(100, 0)];
[path6 addQuadCurveToPoint:CGPointMake(250, 100) controlPoint:CGPointMake(200, 300)];

//    二级贝塞尔曲线
UIBezierPath *path7 = [UIBezierPath bezierPath];
//    起点
[path7 moveToPoint:CGPointMake(100, 100)];
/*
 ToPoint： 终点
 controlPoint1： 控制点1
 controlPoint2： 控制点2
 */
[path7 addCurveToPoint:CGPointMake(250, 100) controlPoint1:CGPointMake(100, 0) controlPoint2:CGPointMake(200, 300)];

//    多边形
UIBezierPath *path8 = [UIBezierPath bezierPath];
[path8 moveToPoint:CGPointMake(100, 100)];
[path8 addLineToPoint:CGPointMake(200, 100)];
[path8 addLineToPoint:CGPointMake(200, 200)];
//    闭合
[path8 closePath];

//    带曲线边的多边形
UIBezierPath *path9 = [UIBezierPath bezierPath];
[path9 moveToPoint:CGPointMake(100, 100)];
[path9 addArcWithCenter:CGPointMake(200, 100) radius:50 startAngle:0 endAngle:M_PI_2 clockwise:YES];
[path9 addLineToPoint:CGPointMake(200, 200)];
[path9 closePath];

3、UIBezierPath动画

• 下面就举例几种动画
  a、一张全屏图片从一个圆点扩充到全屏。

//    图片
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    imageView.image = [UIImage imageNamed:@"02"];
    [self.view addSubview:imageView];
    CAShapeLayer *layer = [CAShapeLayer layer];
    imageView.layer.mask = layer;
    
//    起始圆
    UIBezierPath *path1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, 10, 10)];
//    终止圆
    UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:imageView.center radius:400 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
    layer.path = path2.CGPath;
    //创建动画
    CABasicAnimation * maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    //动画是加到layer上的，所以必须为CGPath，再将CGPath桥接为OC对象
    maskLayerAnimation.fromValue = (__bridge id)(path1.CGPath);
    maskLayerAnimation.toValue   = (__bridge id)((path2.CGPath));
    maskLayerAnimation.duration  = 5;
    // 添加动画
    [layer addAnimation:maskLayerAnimation forKey:nil];

b、动画将UIBezierPath画出来

    CAShapeLayer *layer = [CAShapeLayer layer];
    // 填充颜色
    layer.fillColor = [UIColor clearColor].CGColor;
    // /绘制颜色
    layer.strokeColor = [UIColor redColor].CGColor;
    //    线宽
    layer.lineWidth = 3;
    //    线条的起始位置(0~1，对应于path而言，默认为0)
//    layer.strokeStart = 0;
    //    线条的结束位置(0~1，对应于path而言，默认为1)
//    layer.strokeEnd = 1;
    [self.view.layer addSublayer:layer];
    //    矩形
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 100, 100)];
    //    椭圆(包括圆)
    UIBezierPath *path1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
    //    圆角矩形
    UIBezierPath *path2 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(110, 100, 150, 100) cornerRadius:30];
    //    路径叠加
    [path2 appendPath:path];
    [path2 appendPath:path1];
    //    配合使用的UIBezierPath路径
    layer.path = path2.CGPath;
    
    //创建动画
    CABasicAnimation * maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    //动画是加到layer上的，所以必须为CGPath，再将CGPath桥接为OC对象
    maskLayerAnimation.fromValue = @(0.0);
    maskLayerAnimation.toValue   = @(1.0);
    maskLayerAnimation.duration  = 5;
    // 添加动画
    [layer addAnimation:maskLayerAnimation forKey:nil];

c、让一个控件沿UIBezierPath路径运动

    UIView *view = [[UIView alloc] init];
    view.backgroundColor = [UIColor redColor];
    view.bounds = CGRectMake(0, 0, 16, 16);
    view.layer.cornerRadius = 8;
    [self.view addSubview:view];
    
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint:CGPointMake(10, 520)];
    [bezierPath addLineToPoint:CGPointMake(50, 530)];
    [bezierPath addQuadCurveToPoint:CGPointMake(100, 510) controlPoint:CGPointMake(80, 650)];
    [bezierPath addCurveToPoint:CGPointMake(200, 530) controlPoint1:CGPointMake(130, 600) controlPoint2:CGPointMake(170, 400)];
    [bezierPath addArcWithCenter:CGPointMake(300, 400) radius:50 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
    [bezierPath moveToPoint:CGPointMake(20, 520)];
    [bezierPath addLineToPoint:CGPointMake(200, 520)];
    
    //创建动画
    CAKeyframeAnimation * maskLayerAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    maskLayerAnimation.path = bezierPath.CGPath;
    maskLayerAnimation.duration  = 5;
    // 添加动画
    [view.layer addAnimation:maskLayerAnimation forKey:nil];