貝塞爾曲線 總結

基礎

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段。

常用方法

、根據一個矩形畫曲線
+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect


、根據矩形框的内切圓畫曲線

+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect



、根據矩形畫帶圓角的曲線
+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius



、在矩形中，可以針對四角中的某個角加圓角, 一般用于設定某個視圖的頂端兩角為圓形

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

corners:枚舉值，可以選擇某個角

cornerRadii:圓角的大小
*/

、以某個中心點畫弧線 
 + (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
/*
參數：

center:弧線中心點的坐标

radius:弧線所在圓的半徑

startAngle:弧線開始的角度值

endAngle:弧線結束的角度值

clockwise:是否順時針畫弧線
*/


、畫二進制曲線，一般和moveToPoint配合使用
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
/*
參數：

endPoint:曲線的終點

controlPoint:畫曲線的基準點
*/


、以三個點畫一段曲線，一般和moveToPoint配合使用
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
/*
參數：

endPoint:曲線的終點

controlPoint1:畫曲線的第一個基準點

controlPoint2:畫曲線的第二個基準點
*/
           

補充

// 根據矩形 畫曲線
   UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(, , , )];

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

//2. 根據矩形框的内切圓 畫曲線
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(, , self.control, self.control)];

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

//3. 根據矩形框 畫帶圓角的曲線
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(, , , ) cornerRadius:self.control / ];
    [bezierPath stroke];
           

//4. 在矩形中，可以針對四角中的某個角加圓角, 一般用于設定某個視圖的頂端兩角為圓形
    /**
     * corners:枚舉值，可以選擇某個角
     UIRectCornerTopLeft     = 1 << 0,
     UIRectCornerTopRight    = 1 << 1,
     UIRectCornerBottomLeft  = 1 << 2,
     UIRectCornerBottomRight = 1 << 3,
     UIRectCornerAllCorners

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

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

    /*
     center:弧線中心點的坐标
     radius:弧線所在圓的半徑
     startAngle:弧線開始的角度值
     endAngle:弧線結束的角度值
     clockwise:是否順時針畫弧線
     */
    [bezierPath stroke];
           

//6. 畫二進制曲線，一般和moveToPoint配合使用
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];

    //開始點
    [bezierPath moveToPoint:CGPointMake(, )];
    /**
     *  endPoint: 曲線的終點
     *  controlPoint:畫曲線的基準點
     */
    [bezierPath addQuadCurveToPoint:CGPointMake(, ) controlPoint:CGPointMake(self.control, self.control)];

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

//7. 以三個點畫一段曲線，一般和moveToPoint配合使用
    /**參數：
     endPoint:曲線的終點
     controlPoint1:畫曲線的第一個基準點
     controlPoint2:畫曲線的第二個基準點
     */
    [bezierPath addCurveToPoint:CGPointMake(, ) controlPoint1:CGPointMake(self.control, ) controlPoint2:CGPointMake(, self.control)];

    [bezierPath addCurveToPoint:CGPointMake(, ) controlPoint1:CGPointMake(self.control, ) controlPoint2:CGPointMake(, 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. 官方文檔