一：配合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];
网友评论