iOS CAShapeLayer和UIBezierPath绘图

前言

1、UIBezierPath

UIBezierPath是在 UIKit 中的一个类，继承于NSObject,可以创建基于矢量的路径。此类是Core Graphics框架关于path的一个OC封装。使用此类可以定义常见的圆形、多边形等形状 。我们使用直线、弧（arc）来创建复杂的曲线形状。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。

2、CAShapeLayer

CAShapeLayer顾名思义，继承于CALayer。 每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。具体的形状由其path(类型为CGPathRef)属性指定。 普通的CALayer是矩形，所以需要frame属性。CAShapeLayer初始化时也需要指定frame值，但 它本身没有形状，它的形状来源于其属性path 。CAShapeLayer有不同于CALayer的属性，它从CALayer继承而来的属性在绘制时是不起作用的。

绘制图形

1、圆形

- (void)viewDidLoad {
[super viewDidLoad];

CAShapeLayer *shapeLayer = [CAShapeLayer new];
shapeLayer.fillColor = [UIColor redColor].CGColor; //填充颜色
[self.view.layer shapeLayer];

UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2, 150) radius:80 startAngle:0 endAngle:M_PI*2 clockwise:YES];
shapeLayer.path = bezierPath.CGPath;
}

2、圆环

CAShapeLayer *shapeLayer = [CAShapeLayer new];
shapeLayer.fillColor = [UIColor whiteColor].CGColor; //填充颜色
shapeLayer.strokeColor = [UIColor redColor].CGColor; //边框颜色
shapeLayer.lineWidth = 20.0f; //边框的宽度
[self.view.layer addSublayer:circleLayer];

UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2, 150) radius:80 startAngle:0 endAngle:M_PI*2 clockwise:YES];
shapeLayer.path = bezierPath.CGPath;

3、任意形状

CAShapeLayer *shapeLayer = [CAShapeLayer new];
shapeLayer.fillColor = [UIColor redColor].CGColor; //填充颜色
[self.view.layer addSublayer:shapeLayer];

UIBezierPath *bezierPath = [UIBezierPath new];
[bezierPath moveToPoint:CGPointMake(50, 50)];
[bezierPath addLineToPoint:CGPointMake(250, 50)];
[bezierPath addLineToPoint:CGPointMake(200, 200)];
[bezierPath addLineToPoint:CGPointMake(100, 250)];
[bezierPath closePath];//将起点与结束点相连接
shapeLayer.path = bezierPath.CGPath;

4、根据矩形画带圆角的曲线

+ (UIBezierPath*)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius

corners：用来指定需要加圆角的位置，该参数为枚举值，具体枚举在下文列出

cornerRadii：参数用来设置圆角的大小)

UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 100, self.view.frame.size.width-20, 100)
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:CGSizeMake(10, 10)];

CAShapeLayer *shaperLayer = [CAShapeLayer new];
shaperLayer.fillColor = [UIColor orangeColor].CGColor;
[self.view.layer addSublayer:shaperLayer];

shaperLayer.path = bezierPath.CGPath;

5、绘制带箭头的提示框

UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 100, self.view.frame.size.width-20, 100)
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:CGSizeMake(10, 10)];

[bezierPath moveToPoint:CGPointMake(100, 60)];
[bezierPath addLineToPoint:CGPointMake(80, 100)];
[bezierPath addLineToPoint:CGPointMake(120, 100)];

CAShapeLayer *shaperLayer = [CAShapeLayer new];
shaperLayer.fillColor = [UIColor orangeColor].CGColor;
[self.view.layer addSublayer:shaperLayer];

shaperLayer.path = bezierPath.CGPath;

6、画线

UIBezierPath *linePath = [UIBezierPath bezierPath];
[linePath moveToPoint:CGPointMake(45, 60)];
[linePath addLineToPoint:CGPointMake(55, 70)];
[linePath addLineToPoint:CGPointMake(75, 50)];

CAShapeLayer *lineLayer = [CAShapeLayer layer];
lineLayer.lineWidth = 3.0;
lineLayer.strokeColor = [UIColor whiteColor].CGColor;
lineLayer.path = linePath.CGPath;
lineLayer.lineCap = kCALineCapRound;
lineLayer.fillColor = nil; // 默认为blackColor
[self.view.layer addSublayer:lineLayer];