UIBezierPath-贝塞尔曲线

 一、UIBezierPath基本概念：

         UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形，使用曲线段去创建弧（arc），圆或者其他复杂的曲线形状。每一段都包括一个或者多个点，绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。

二、UIBezierPath常用方法的使用：

eg1: 绘制多边形

/**
 创建和使用path对象步骤：
 1. 重写View的drawRect方法
 2. 创建UIBezierPath的对象
 3. 使用方法moveToPoint: 设置初始点
 4. 根据具体要求使用UIBezierPath类方法绘图（比如要画线、矩形、圆、弧？等）
 5. 设置UIBezierPath对象相关属性 （比如lineWidth、lineJoinStyle、aPath.lineCapStyle、color）
 6. 使用stroke 或者 fill方法结束绘图
 */

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色
    
    UIBezierPath *polygonPath = [UIBezierPath bezierPath];
    
    polygonPath.lineWidth = 10.0f;
    polygonPath.lineJoinStyle = kCGLineJoinRound; //线与线连接点类型 -- 圆形
    polygonPath.lineCapStyle = kCGLineCapRound; //线端点类型 -- 圆形
    
    //Draw the lines
    [polygonPath moveToPoint: CGPointMake(150, 200)]; //设置多边形的初始点
    [polygonPath addLineToPoint: CGPointMake(250, 300)]; //连接初始点到当前点并增加 线
    [polygonPath addLineToPoint: CGPointMake(250, 400)];
    [polygonPath addLineToPoint: CGPointMake(50, 400)];
    [polygonPath addLineToPoint: CGPointMake(50, 300)];
    
    [polygonPath closePath]; //最后一条线通过调用closePath得到
    
    [polygonPath stroke]; //用 stroke 得到的是不被填充的view，用 fill 得到的内部被填充的view
    
}

运行结果：

eg2:绘制一段弧线

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色

    /**
     param ArcCenter 圆心
     param radius 圆半径
     param startAngle 起始角度
     param endAngle 结束角度
     param clockwise true: 顺时针旋转 false: 逆时针旋转
     */
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:self.center radius:100 startAngle:0 endAngle:M_PI/4*3 clockwise: true];
    circlePath.lineJoinStyle = kCGLineJoinRound; //线与线连接点类型 -- 圆形
    circlePath.lineCapStyle = kCGLineCapRound;
    circlePath.lineWidth = 5.0f;
    [circlePath stroke];
    
    return;

}

运行结果：

eg3:绘制二次贝塞尔曲线

- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    path.lineJoinStyle = kCGLineJoinRound; //线与线连接点类型 -- 圆形
    path.lineCapStyle = kCGLineCapRound;
    path.lineWidth = 2.0f;
    
    [path moveToPoint: CGPointMake(100, 300)]; //初始点A
    
    /**
     param QuadCurveToPoint 结束点B
     param controlPoint 控制点
     */
    [path addQuadCurveToPoint: CGPointMake(300, 200) controlPoint: CGPointMake(200, 50)];
    
    [path stroke];
    
    return;
}

运行结果：

 

eg4:绘制三次贝塞尔曲线

- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    path.lineJoinStyle = kCGLineJoinRound; //线与线连接点类型 -- 圆形
    path.lineCapStyle = kCGLineCapRound;
    path.lineWidth = 2.0f;
    
    [path moveToPoint: CGPointMake(100, 200)]; //初始点A
    
    /**
     param CurveToPoint 结束点B
     param controlPoint1 控制点1
     param controlPoint2 控制点2
     */
    [path addCurveToPoint: CGPointMake(300, 200) controlPoint1: CGPointMake(200, 100) controlPoint2: CGPointMake(200, 300)];
    
    [path stroke];
    
    return;
}

运行结果：

三、贝塞尔曲线常用方法和属性：

+ (instancetype)bezierPath;   //初始化贝塞尔曲线(无形状)
+ (instancetype)bezierPathWithRect:(CGRect)rect;  //绘制矩形贝塞尔曲线
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;  //绘制椭圆（圆形）曲线
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // 绘制含有圆角的贝塞尔曲线（矩形或正方形）
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;  //绘制可选择圆角方位的贝塞尔曲线
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;   //绘制圆弧曲线
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath; //根据CGPathRef绘制贝塞尔曲线
- (void)moveToPoint:(CGPoint)point;  //贝塞尔曲线开始的点
- (void)addLineToPoint:(CGPoint)point;  //添加直线到该点
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;  //添加三次曲线到该点
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint; //添加二次曲线到该点
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);  //添加圆弧 注:上一个点会以直线的形式连接到圆弧的起点
- (void)closePath;  //闭合曲线

- (void)removeAllPoints; //去掉所有曲线点