贝塞尔曲线 总结

基础

---

Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。 1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用他的姓氏来命名，称为贝塞尔曲线。

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

使用步骤

---

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

当创建path，我们应该管理path上面的点相对于原点（0，0），这样我们在随后就可以很容易的移动path了。为了绘制path对象，我们要用到stroke和fill方法。这些方法在current graphic context下渲染path的line和curve段。

常用方法

---

1、根据一个矩形画曲线
+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect


2、根据矩形框的内切圆画曲线

+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect



3、根据矩形画带圆角的曲线
+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius



4、在矩形中，可以针对四角中的某个角加圆角, 一般用于设置某个视图的顶端两角为圆形

+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii
/*
参数：

corners:枚举值，可以选择某个角

cornerRadii:圆角的大小
*/

5、以某个中心点画弧线 
 + (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
/*
参数：

center:弧线中心点的坐标

radius:弧线所在圆的半径

startAngle:弧线开始的角度值

endAngle:弧线结束的角度值

clockwise:是否顺时针画弧线
*/


6、画二元曲线，一般和moveToPoint配合使用
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
/*
参数：

endPoint:曲线的终点

controlPoint:画曲线的基准点
*/


7、以三个点画一段曲线，一般和moveToPoint配合使用
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
/*
参数：

endPoint:曲线的终点

controlPoint1:画曲线的第一个基准点

controlPoint2:画曲线的第二个基准点
*/

补充

---

    //1. 根据矩形 画曲线
   UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 250, 50)];

    bezierPath.lineWidth = 5.0;
    bezierPath.lineCapStyle = kCGLineCapRound;
    bezierPath.lineJoinStyle = kCGLineCapRound;
    [bezierPath stroke];

//2. 根据矩形框的内切圆 画曲线
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, self.control, self.control)];

    [[UIColor redColor] set];
    [bezierPath stroke];

//3. 根据矩形框 画带圆角的曲线
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 250, 250) cornerRadius:self.control / 10];
    [bezierPath stroke];

//4. 在矩形中，可以针对四角中的某个角加圆角, 一般用于设置某个视图的顶端两角为圆形
    /**
     * corners:枚举值，可以选择某个角
     UIRectCornerTopLeft     = 1 << 0,
     UIRectCornerTopRight    = 1 << 1,
     UIRectCornerBottomLeft  = 1 << 2,
     UIRectCornerBottomRight = 1 << 3,
     UIRectCornerAllCorners

     * cornerRadii:圆角的大小
     *
     */
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 250, 250) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight  cornerRadii:CGSizeMake(40, 40)];
    [bezierPath stroke];

//5. 画弧度
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:50 startAngle:0 endAngle:M_PI / 6.0  clockwise:YES];

    /*
     center:弧线中心点的坐标
     radius:弧线所在圆的半径
     startAngle:弧线开始的角度值
     endAngle:弧线结束的角度值
     clockwise:是否顺时针画弧线
     */
    [bezierPath stroke];

    //6. 画二元曲线，一般和moveToPoint配合使用
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];

    //开始点
    [bezierPath moveToPoint:CGPointMake(40, 40)];
    /**
     *  endPoint: 曲线的终点
     *  controlPoint:画曲线的基准点
     */
    [bezierPath addQuadCurveToPoint:CGPointMake(200, 250) controlPoint:CGPointMake(self.control, self.control)];

    [bezierPath addQuadCurveToPoint:CGPointMake(100, 200) controlPoint:CGPointMake(self.control, self.control)];

//7. 以三个点画一段曲线，一般和moveToPoint配合使用
    /**参数：
     endPoint:曲线的终点
     controlPoint1:画曲线的第一个基准点
     controlPoint2:画曲线的第二个基准点
     */
    [bezierPath addCurveToPoint:CGPointMake(100, 180) controlPoint1:CGPointMake(self.control, 300) controlPoint2:CGPointMake(110, self.control)];

    [bezierPath addCurveToPoint:CGPointMake(200, 180) controlPoint1:CGPointMake(self.control, 300) controlPoint2:CGPointMake(110, self.control)];

    [bezierPath stroke];

工具

---

这个可以看到贝塞尔曲线的形成过程:
http://myst729.github.io/bezier-curve/

参考

---

1. http://blog.csdn.net/guo_hongjun1611/article/details/7842110
2. http://blog.csdn.net/guo_hongjun1611/article/details/7839371
3. http://www.cnblogs.com/moyunmo/p/3600091.html
4. http://www.cnblogs.com/easonoutlook/archive/2013/05/02/3055388.html
5. 官方文档