iOS 图形绘制（二）-UIBezierPath

UIBezierPath 可以创建基于矢量的路径，例如椭圆或者矩形，或者有多个直线和曲线段组成的形状。

使用 UIBezierPath，你只能在当前上下文中绘图，所以如果你当前处于 UIGraphicsBeginImageContextWithOptions 函数或 drawRect: 方法中，你就可以直接使用UIKit提供的方法进行绘图。如果你持有一个 context: 参数，那么使用UIKit提供的方法之前，必须将该上下文参数转化为当前上下文。幸运的是，调用 UIGraphicsPushContext 函数可以方便的将 context: 参数转化为当前上下文，记住最后别忘了调用 UIGraphicsPopContext 函数恢复上下文环境。

简言之：我们一般使用 UIBezierPath 都是在重写的 drawRecrt: 方法这种情形。其绘图的步骤是这样的：
1.重写 drawRect: 方法。但不需要我们自己获取当前上下文 context；
2.创建相应图形的 UIBezierPath 对象，并设置一些修饰属性；
3.渲染，完成绘制。

1.绘制矩形、圆形、椭圆形

绘制矩形最简单的办法是使用 UIRectFrame 和 UIRectFill

-(void)drawRect:(CGRect)rect{
    //设置画笔颜色
    [[UIColor redColor] setFill];
    UIRectFill(CGRectMake(120, 120, 100, 50));
}

通过使用 UIBezierPath 可以自定义绘制线条的粗细，是否圆角等。

- (void)drawRect:(CGRect)rect{
    UIColor *color = [UIColor colorWithRed:0.7 green:0.7 blue:0.7 alpha:1];
    [color set]; //设置线条颜色
    
    //矩形
//    UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(120, 120, 100, 50)];
    //圆形
//    UIBezierPath* aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(120, 120, 100, 100)];
    //椭圆
    UIBezierPath* aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(120, 120, 100, 50)];
    
    aPath.lineWidth = 2.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    
    [aPath stroke];
}

2.多边形

多边形是一些简单的形状，这些形状是由一些直线线条组成，我们可以用 moveToPoint: 和 addLineToPoint: 方法去构建。moveToPoint: 设置我们想要创建形状的起点。从这点开始，我们可以用方法 addLineToPoint: 去创建一个形状的线段。
我们可以连续的创建 line，每一个 line 的起点都是先前的终点，终点就是指定的点。
closePath 可以在最后一个点和第一个点之间画一条线段。

- (void)drawRect:(CGRect)rect
{
    UIColor *color = [UIColor colorWithRed:0.7 green:0.7 blue:0.7 alpha:1];
    [color set];
    
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 3.0;
    
    aPath.lineCapStyle = kCGLineCapRound;
    aPath.lineJoinStyle = kCGLineCapRound;
    
    // 起点
    [aPath moveToPoint:CGPointMake(100, 150)];
    
    // 绘制线条
    [aPath addLineToPoint:CGPointMake(140, 250)];
    [aPath addLineToPoint:CGPointMake(250, 250)];
    [aPath addLineToPoint:CGPointMake(280, 100)];
    [aPath addLineToPoint:CGPointMake(160, 70)];
    [aPath closePath];//第五条线通过调用closePath方法得到的
    
    //根据坐标点连线
    [aPath stroke];
//    [aPath fill];
}

3.圆弧

想画弧线组成的不规则形状，我们需要使用中心点、弧度和半径，如下图。弧度使用顺时针脚底，0弧度指向右边，pi/2指向下方，pi指向左边，-pi/2指向上方。然后使用 bezierPathWithArcCenter: radius: startAngle endAngle: clockwise: 方法来绘制。

- (void)drawRect:(CGRect)rect
{
    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色
    
    UIBezierPath* aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(180, 180)
                                                         radius:75
                                                     startAngle:0
                                                       endAngle:M_PI
                                                      clockwise:YES];
    
    aPath.lineWidth = 2.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    
    [aPath stroke];
}

4.贝塞尔曲线

二次贝塞尔曲线

- (void)drawRect:(CGRect)rect{
    UIColor *color = [UIColor redColor];
    [color set];
    
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    
    aPath.lineWidth = 3.0;
    aPath.lineCapStyle = kCGLineCapRound;
    aPath.lineJoinStyle = kCGLineCapRound;
    //设置起始点
    [aPath moveToPoint:CGPointMake(120, 200)];
    //设置终点和控制点
    [aPath addQuadCurveToPoint:CGPointMake(220, 150) controlPoint:CGPointMake(170, 120)];
    
    [aPath stroke];
}

三次贝塞尔曲线

- (void)drawRect:(CGRect)rect{
    UIColor *color = [UIColor redColor];
    [color set];
    
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    
    aPath.lineWidth = 3.0;
    aPath.lineCapStyle = kCGLineCapRound;
    aPath.lineJoinStyle = kCGLineCapRound;
    
    [aPath moveToPoint:CGPointMake(150, 180)];
    
    [aPath addCurveToPoint:CGPointMake(350, 180) controlPoint1:CGPointMake(200, 0) controlPoint2:CGPointMake(250, 200)];
    
    [aPath stroke];
}

5.画一朵花

- (void)drawRect:(CGRect)rect{
    
    UIColor *color = [UIColor redColor];
    [color set];
    
    UIBezierPath* aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:40 startAngle:M_PI endAngle:0 clockwise:YES];
    
    aPath.lineWidth = 3.0;
    aPath.lineCapStyle = kCGLineCapRound;
    aPath.lineJoinStyle = kCGLineCapRound;
    
    [aPath addArcWithCenter:CGPointMake(190, 190) radius:40 startAngle:-M_PI/2 endAngle:M_PI/2 clockwise:YES];
    [aPath addArcWithCenter:CGPointMake(150, 230) radius:40 startAngle:0 endAngle:M_PI clockwise:YES];
    [aPath addArcWithCenter:CGPointMake(110, 190) radius:40 startAngle:M_PI/2 endAngle:-M_PI/2 clockwise:YES];
    
    [aPath stroke];
}