使用Quartz2D绘制简单线段

使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 。CAShapeLayer 是 CALayer 的子类，但是比 CALayer 更灵活，可以画出各种图形。CAShapeLayer 有一个神奇的属性 path 用这个属性配合上 UIBezierPath 这个类就可以达到超神的效果。

NS_CLASS_AVAILABLE_IOS(3_2) @interface UIBezierPath : NSObject<NSCopying, NSCoding>

@interface CAShapeLayer : CALayer : NSObject <NSCoding, CAMediaTiming>

给CAShapeLayer一个path它就能变成你想要的形状。 CAShapeLayer的strokeEnd、strokeStart和lineWidth 三个属性像frame一样支持动画效果。使用UIBezierPath和CAShapeLayer画各种图形

private func animation1() {
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = 0
animation.toValue = 1
animation.duration = 2
layer.addAnimation(animation, forKey: "")
}

private func animation2() {
layer.strokeStart = 0.5
layer.strokeEnd = 0.5

let animation = CABasicAnimation(keyPath: "strokeStart")
animation.fromValue = 0.5
animation.toValue = 0
animation.duration = 2

let animation2 = CABasicAnimation(keyPath: "strokeEnd")
animation2.fromValue = 0.5
animation2.toValue = 1
animation2.duration = 2

layer.addAnimation(animation, forKey: "")
layer.addAnimation(animation2, forKey: "")
}

private func animation3() {
let animation = CABasicAnimation(keyPath: "lineWidth")
animation.fromValue = 1
animation.toValue = 10
animation.duration = 2
layer.addAnimation(animation, forKey: "")
}

UIBezierPath & CAShapLayer的比较

参照文章iOS关于CAShapeLayer与UIBezierPath的知识内容

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

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

系统方法 ：- (void)drawRect:(CGRect)rect;

是系统的 绘图方法，参数rect是View本身bounds，在该方法内，系统会自动创建一个隐式layer，跟当前View相关联的上下文；可以在该方法内直接使用UIBezierPath；如果不在这个方法内部进行画图，需要获取上下文；

绘制曲线

代码，例如：

//画曲线
- (void)drawCurves{
//1.获取跟View相关联的上下文(uigraphics开头)
CGContextRef ctx =  UIGraphicsGetCurrentContext();
//2.描述路径
UIBezierPath *path = [UIBezierPath bezierPath];
//设置起点
[path moveToPoint:CGPointMake(50, 250)];
//添加一根曲线到某个点
[path addQuadCurveToPoint:CGPointMake(250, 250) controlPoint:CGPointMake(80, 100)];
//3.把路径添加到上下文
CGContextAddPath(ctx, path.CGPath);
//4.把上下文内容渲染到View上.
CGContextStrokePath(ctx);
}

绘制直线

代码，例如：

//画直线
- (void)drawLine {
//1.获取跟View相关联的上下文(uigraphics开头)
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描述路径
//一条路径可以绘制多条线
UIBezierPath *path = [UIBezierPath bezierPath];
//设置起点
[path moveToPoint:CGPointMake(50, 150)];
//添加一根线到某个点
[path addLineToPoint:CGPointMake(250, 50)];

//画第二根线
//[path moveToPoint:CGPointMake(50, 250)];
//[path addLineToPoint:CGPointMake(250, 100)];

//把上一条路径的终点,当作是下一个路径的起点
[path addLineToPoint:CGPointMake(50, 250)];

//设置上下文的状态
CGContextSetLineWidth(ctx, 10);
//设置线的连接样式
CGContextSetLineJoin(ctx, kCGLineJoinBevel);
//设置线的顶角样式
CGContextSetLineCap(ctx, kCGLineCapRound);
//设置颜色
[[UIColor redColor] set];

//3.把路径添加到上下文
//UIBezierPath->UIKit -->  CGPathRef->CoreGraphics
CGContextAddPath(ctx, path.CGPath);
//4.把上下文当中绘制的内容渲染到跟View关联的layer.(stroke ,fill)
CGContextStrokePath(ctx);
}

绘制虚线

核心方法解析：

//第一个参数是个CGFloat数组，其中元素依次为第一个线段，第一个空隙，第二个线段...;第二个参数是取第一个参数数组中的前几个来进行重复；第三个参数phase可以写0；phase应该是沿着虚线的方向的offset，即偏移量；
CGFloat dash[] = {5,10};//第一个参数值
- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;

代码，例如：

//画虚线
- (void)drawDottedLine{
UIBezierPath *path = [UIBezierPath bezierPath];
//设置起点
[path moveToPoint:CGPointMake(50, 150)];
//添加一根线到某个点
[path addLineToPoint:CGPointMake(250, 50)];
//设置线的宽度
//[path setLineWidth:10];
CGFloat dash[] = {4,4};
[path setLineDash:dash count:2 phase:0];
//设置顶端样式
//[path setLineCapStyle:kCGLineCapRound];
[[UIColor redColor] setStroke];
[path stroke];
}

未完待续。。。