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;
}
