1 UIBezierPath基础

使用UIBezierPath类可以创建基于矢量的路径，这个类在UIKit中。此类是Core Graphics框架关于CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形，使用曲线段去创建弧（arc），圆或者其他复杂的曲线形状。每一段都包括一个或者多个点，绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。

2 UIBezierPath的使用步骤

创建和使用一个path对象的过程是分开的。创建path是第一步，包含一下步骤：
（1）创建一个Bezier path对象。
（2）使用方法moveToPoint:去设置初始线段的起点。
（3）添加line或者curve去定义一个或者多个subpaths。
（4）改变UIBezierPath对象跟绘图相关的属性。

下面介绍UIBezierPath最常用最简单的两种绘图方式

2.1 UIBezierPath直接绘图

线条自己控制颜色、拐角等参数

- (void)drawRect:(CGRect)rect
{
      UIColor *color = [UIColor redColor];
      [color set];//设置线条颜色
      UIBezierPath* aPath = [UIBezierPath 
      bezierPathWithRect:CGRectMake(20, 20, 100, 50)];
      aPath.lineWidth = 5.0;
      aPath.lineCapStyle = kCGLineCapRound;//线条拐角
      aPath.lineJoinStyle = kCGLineCapRound;//终点处理
      [aPath stroke];
}

2.2 UIBezierPath在layer层绘图

在layer里设置线条宽度、颜色等参数

- (void)drawRect:(CGRect)rect
{
      UIBezierPath* aPath = [UIBezierPath 
      bezierPathWithRect:CGRectMake(20, 20, 100, 50)];
      
      CAShapeLayer *layer = [CAShapeLayer layer];
      layer.lineWidth = 1;
      layer.strokeColor = [UIColor redColor];
      layer.fillColor = nil; // 默认为blackColor
      layer.path = aPath.CGPath;
      [self.layer addSublayer:_curveLineLayer];
}

3 绘图实践

楼主最近在做项目的过程中使用了不少UIBezierPath进行绘图，分别用到了绘制虚线，绘制三元曲线、绘制遮罩三个知识点

3.1 绘制虚线

绘制虚线重点在于lineDashPattern（线段分割模式）属性的设置。coordinateLayer.lineDashPattern = @[@(5),@(5)]意思是：线条宽度、空白宽度这样循环

- (void)drawRect:(CGRect)rect {
    UIBezierPath *linePath = [UIBezierPath bezierPath];
    [linePath moveToPoint:CGPointMake(20, 51+160)];//设置起始点
    [linePath addLineToPoint:CGPointMake(SCREEN_WIDTH-30, 51+160)];

    CAShapeLayer *coordinateLayer = [CAShapeLayer layer];
    coordinateLayer.lineWidth = 0.5;
    coordinateLayer.lineDashPattern = @[@(5),@(5)]; //重点就在于这句
    coordinateLayer.strokeColor = [UIColor lightGrayColor].CGColor;
    coordinateLayer.fillColor = nil;
    coordinateLayer.path = linePath.CGPath;
    [self.layer addSublayer:coordinateLayer];
}

3.2 绘制曲线

项目里需要绘制的是三阶曲线，三阶曲线需要求出两个控制点，才能在两个点直接画出一条三阶曲线，因此重点就在于怎么求出controlPonit1和controlPonit2，楼主求控制点的方式比较简单，具体可参看代码。绘制曲线的方法则调用一句：[path addCurveToPoint:endPoint controlPoint1:controlPonit1 controlPoint2:controlPonit2];

- (void)drawRateLine {
    
    CGPoint startPoint = [[self.ratePointsArray firstObject] CGPointValue];
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:startPoint];
    
    CGPoint endPoint;
    for (NSInteger i=0; i<self.ratePointsArray.count-1; i++) {
        startPoint = [self.ratePointsArray[i] CGPointValue];
        endPoint = [self.ratePointsArray[i+1] CGPointValue];
        
        CGFloat middle = (startPoint.x+endPoint.x)/2.0;
        CGPoint controlPonit1 = CGPointMake(middle, startPoint.y);
        CGPoint controlPonit2 = CGPointMake(middle, endPoint.y);
        [path addCurveToPoint:endPoint controlPoint1:controlPonit1 controlPoint2:controlPonit2];
    }
   
    self.curveLineLayer.path = path.CGPath;
}

3.3 绘制渐变层

绘制渐变层则都会用到CALayer-CAGradientLayer(梯度图层)，由于下一个实践要降到绘制渐变遮罩层，因此提前讲下CAGradientLayer的使用。
项目里的用法是先在要绘图的view上全局先做一个颜色渐变的梯度图层，然后在梯度楼层上盖上一个遮罩层，遮罩层的绘制可参看3.4的介绍。

self.gradientLayer = [self shadowAsInverseWithColor:BASE_COLOR frame:self.bounds];
[self.layer addSublayer:self.gradientLayer];
[self.gradientLayer setMask:self.backLayer];

//创建渐变楼梯图层
- (CAGradientLayer *)shadowAsInverseWithColor:(UIColor *)color frame:(CGRect)rect
{
    CAGradientLayer *newShadow = [[CAGradientLayer alloc] init];
    newShadow.frame = rect;
    //添加渐变的颜色组合（颜色透明度的改变）
    newShadow.colors = [NSArray arrayWithObjects:
                        (id)[[color colorWithAlphaComponent:0.7] CGColor],
                        (id)[[color colorWithAlphaComponent:0.6] CGColor],
                        (id)[[color colorWithAlphaComponent:0.5] CGColor],
                        (id)[[color colorWithAlphaComponent:0.4] CGColor],
                        (id)[[color colorWithAlphaComponent:0.3] CGColor],
                        (id)[[color colorWithAlphaComponent:0.2] CGColor],
                        (id)[[color colorWithAlphaComponent:0.1] CGColor],
                        nil];
    return newShadow;
}

3.4 绘制遮罩

首先需要介绍一下mask属性，在View的layer层中有一个mask属性，他就是专门来设置该View的遮罩效果的。该mask本身也是一个layer层。我们只需要生成一个自定义的layer，然后覆盖在需要遮罩的View上面即可。问题就归于如何生成入上图所示的不规则图片的Layer，CAShapeLayer可以根据几个点的依次连线，产生一个闭合空间的layer。
楼主的项目就是要在曲线的下方盖上一层渐变的遮罩，曲线是从起点绘制到终点，但并未闭合。而遮罩便是要根据这个曲线的点绘制一个封闭的空间，具体遮罩层参看代码里面backPath的绘制。最终将backLayer设置为上小节渐变楼梯图层的遮罩层。

- (void)drawRateLine {
    [self createPointArrayFromOldArray];
    
    CGPoint startPoint = [[self.ratePointsArray firstObject] CGPointValue];
    UIBezierPath *path = [UIBezierPath bezierPath];
    UIBezierPath *backPath = [UIBezierPath bezierPath];
    
    [path moveToPoint:startPoint];
    [backPath moveToPoint:CGPointMake(startPoint.x, DrawViewHeight)];
    
    CGPoint endPoint;
    for (NSInteger i=0; i<self.ratePointsArray.count-1; i++) {
        startPoint = [self.ratePointsArray[i] CGPointValue];
        endPoint = [self.ratePointsArray[i+1] CGPointValue];
        if (i == 0) {
            [backPath addLineToPoint:startPoint];
        }
        
        CGFloat middle = (startPoint.x+endPoint.x)/2.0;
        CGPoint controlPonit1 = CGPointMake(middle, startPoint.y);
        CGPoint controlPonit2 = CGPointMake(middle, endPoint.y);
        [path addCurveToPoint:endPoint controlPoint1:controlPonit1 controlPoint2:controlPonit2];
        [backPath addCurveToPoint:endPoint controlPoint1:controlPonit1 controlPoint2:controlPonit2];
    }
    
    [backPath addLineToPoint:CGPointMake(self.bounds.size.width, DrawViewHeight)];
    [backPath closePath];
    
    self.backLayer.path = backPath.CGPath;
    self.curveLineLayer.path = path.CGPath;
}