介绍

UIBezierPath是UIKit对Core Graphics中关于path的一个封装，UIBezierPath提供给我们很多非常便捷的API，可以满足我们绝大多数对路径绘制的需求，利用UIBezierPath我们绝大多数情况下可以不用再去利用Core Graphics库中的C语言API去绘制路径。

所以当我们有绘制需求的时候，我们应该优先考虑UIBezierPath

上手练习

我们先创建一个用于测试的UIView，并重写它的drawRect：方法：

• 绘制一个矩形：

-(void)drawRect:(CGRect)rect
{    
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(30, 30, 100, 100)];
    [path stroke];   
}

效果如下：

1.png

大家可以看到短短两行代码，我们就成功的绘制了一个矩形。

利用UIBezierPath的类方法，我们只需要传入一个CGRect就可以生成一个矩形贝塞尔曲线。

stroke方法则帮我们渲染这条曲线，我们可以形象的理解为为这个曲线描边。

类似的我们可以绘制其它图形。

• 绘制一个椭圆（或者是圆）：

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(30, 30, 200, 100)];
[path stroke];

这个API会绘制一个传入矩形的内切椭圆（圆）
效果如下：

2.png

• 绘制一条弧线：

UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 200) radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];
[path2 stroke];

我们只需要传入这段弧线的圆心半径，开始结束角度，是否顺时针
效果如下：

3.png

• 绘制一个自定义图形：

    UIBezierPath *path3 = [UIBezierPath bezierPath];
    [path3 moveToPoint:CGPointMake(100, 100)];
    [path3 addLineToPoint:CGPointMake(200, 100)];
    [path3 addLineToPoint:CGPointMake(150, 100+50*sqrt(3))];
    [path3 addArcWithCenter:CGPointMake(150, 100+50*sqrt(3)/3.0) radius:200*sqrt(3)/3.0 startAngle:M_PI_2 endAngle:M_PI*2/3.0+M_PI_2 clockwise:YES];
    [path3 addLineToPoint:CGPointMake(100, 100)];
    
    [path3 stroke];

如果我们需要绘制的图形并不规则，我们可以通过一点点添加线段，弧线等操作绘制兹定于图形。

效果如下：

4.png

• 绘制二次贝塞尔曲线：

    UIBezierPath *path4 = [UIBezierPath bezierPath];
    [path4 moveToPoint:CGPointMake(100, 100)];
    [path4 addQuadCurveToPoint:CGPointMake(200, 100) controlPoint:CGPointMake(180, 150)];
    [path4 stroke];

通过传入开始结束点和一个控制点，来绘制一个二次贝塞尔曲线，这个控制点同时是这条曲线在起点和终点的切线焦点

效果如下：

5.png

原理如下：

6.png

• 绘制三次贝塞尔曲线：

    UIBezierPath *path5 = [UIBezierPath bezierPath];
    [path5 moveToPoint:CGPointMake(50, 100)];
    [path5 addCurveToPoint:CGPointMake(300, 100) controlPoint1:CGPointMake(100, 0) controlPoint2:CGPointMake(200, 200)];
    [path5 stroke];

通过传入开始结束点和两个控制点，来绘制一个三次贝塞尔曲线，第一个控制点和起点的连线是曲线在起点的切线，第二个控制点，和终点的连线是曲线在终点的切线

效果如下：

7.png

原理如下：

8.png

贝塞尔曲线的配置

• 填充（fill）

在图形的绘制中，UIBezierPath还提供给了我们很多其它参数去配置，我们挑一些重要的来分析。

首先，我们刚刚对贝塞尔曲线的绘制都是调用stroke方法，也就是描边，除了stroke方法还以一个fill方法，也就是填充

UIBezierPath *path1 = [UIBezierPath bezierPathWithRect:CGRectMake(30, 30, 200, 100)];
[path1 fill];

效果如下：

9.png

• 设置颜色

我们还能给绘制的图形设置颜色：

    [[UIColor blueColor] set];
    UIBezierPath *path1 = [UIBezierPath bezierPathWithRect:CGRectMake(30, 30, 200, 100)];
    [path1 stroke];

效果如下：

10.png

• 设置线条宽度

给描边的线条设置宽度：

    UIBezierPath *path1 = [UIBezierPath bezierPathWithRect:CGRectMake(30, 30, 200, 100)];
    path1.lineWidth = 10;
    [path1 stroke];

效果如下：

11.png