iOS UIBezierPath貝塞爾曲線常用方法

chrissy740 8年前發布 | 28K 次閱讀貝塞爾曲線 iOS開發移動開發

關于 UIBezierPath

UIBezierPath 這個類在UIKit中，是Core Graphics框架關于path的一個封裝，使用此類可以定義簡單的形狀，比如我們常用到，矩形，圓形，橢圓，弧，或者不規則的多邊形

UIBezierPath 基本使用方法

UIBezierPath 對象是CGPathRef數據類型的封裝。path如果是基于矢量形狀的，都用直線或曲線去創建。我們一般使用 UIBezierPath 都是在重寫view的 drawRect 方法這種情形。我們用直線去創建矩形或多邊形，使用曲線創建弧或者圓。創建和使用path對象步驟：

1、重寫View的 drawRect 方法

2、創建 UIBezierPath 的對象

3、使用方法 moveToPoint: 設置初始點

4、根據具體要求使用 UIBezierPath 類方法繪圖（比如要畫線、矩形、圓、弧？等）

5、設置 UIBezierPath 對象相關屬性（比如 lineWidth 、 lineJoinStyle 、 aPath.lineCapStyle 、 color ）

6、使用stroke 或者 fill方法結束繪圖

比如我們想要畫一條線demo：

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set]; //設置線條顏色

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 10)];
    [path addLineToPoint:CGPointMake(200, 80)];

    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound; //線條拐角
    path.lineJoinStyle = kCGLineJoinRound; //終點處理

    [path stroke];
}

其他基本使用方法

在介紹其他使用方法之前，我們先來看一下 path 的幾個屬性，以便下面我進行設置。

1、 [color set]; 設置線條顏色，也就是相當于畫筆顏色

2、 path.lineWidth = 5.0; 這個很好理解了，就是劃線的寬度

3、 path.lineCapStyle 這個線段起點是終點的樣式，這個樣式有三種：

（

1、 kCGLineCapButt 該屬性值指定不繪制端點，線條結尾處直接結束。這是默認值。

2、 kCGLineCapRound 該屬性值指定繪制圓形端點，線條結尾處繪制一個直徑為線條寬度的半圓。

kCGLineCapSquare

）

4、 path.lineJoinStyle 這個屬性是用來設置兩條線連結點的樣式，同樣它也有三種樣式供我們選擇

(

1、 kCGLineJoinMiter 斜接

2、 kCGLineJoinRound 圓滑銜接

3、 kCGLineJoinBevel 斜角連接

）

5、 [path stroke]; 用 stroke 得到的是不被填充的 view ， [path fill]; 用 fill 得到的內部被填充的 view，這點在下面的代碼還有繪制得到的圖片中有，可以體會一下這兩者的不同。

繪制多邊形

duobianxing.png

繪制多邊形，實際上就是又一些直線條連成，主要使用 moveToPoint: 和 addLineToPoint: 方法去創建， moveToPoint: 這個方法是設置起始點，意味著從這個點開始，我們就可以使用 addLineToPoint: 去設置我們想要創建的多邊形經過的點，也就是兩線相交的那個點，用 addLineToPoint: 去創建一個形狀的線段，我們可以連續創建line，每一個line的起點都是先前的終點，終點就是指定的點，將線段連接起來就是我們想要創建的多邊形了。

#import "DrawPolygonView.h"

@implementation DrawPolygonView

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set]; //設置線條顏色

    UIBezierPath* path = [UIBezierPath bezierPath];
    path.lineWidth = 5.0;

    path.lineCapStyle = kCGLineCapRound; //線條拐角
    path.lineJoinStyle = kCGLineJoinRound; //終點處理

    [path moveToPoint:CGPointMake(200.0, 50.0)];//起點

    // Draw the lines
    [path addLineToPoint:CGPointMake(300.0, 100.0)];
    [path addLineToPoint:CGPointMake(260, 200)];
    [path addLineToPoint:CGPointMake(100.0, 200)];
    [path addLineToPoint:CGPointMake(100, 70.0)];
    [path closePath];//第五條線通過調用closePath方法得到的

    //    [path stroke];//Draws line 根據坐標點連線
    [path fill];//顏色填充

}

在這里我們可以看到最后第五條線是用 [path closePath]; 得到的，closePath方法不僅結束一個shape的subpath表述，它也在最后一個點和第一個點之間畫一條線段，這個一個便利的方法我們不需要去畫最后一條線了，哈哈哈哈。這里我們用到的是 [path fill];//顏色填充進行坐標連點，但是我們看見的是五邊形內部被顏色填充了，如果我們使用 [path stroke]; 那我們得到的就是一個用線畫的五邊形。

畫矩形或者正方形

juxing.png

大家都知道正方形就是特殊的矩形咯，不多講。只說矩形。

使用 + (UIBezierPath *)bezierPathWithRect:(CGRect)rect 這個方法，設置好坐標 frame 就好了，就像我們創建 view 一樣，好理解。

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set]; //設置線條顏色

    UIBezierPath* path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 80)];

    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound; //線條拐角
    path.lineJoinStyle = kCGLineJoinRound; //終點處理

    [path stroke];
}

創建圓形或者橢圓形

yuanxing.png

使用 + (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect 這個方法創建圓形或者橢圓形。

傳入的rect矩形參數繪制一個內切曲線，如果我們傳入的rect是矩形就得到矩形的內切橢圓，如果傳入的是正方形得到的就是正方形的內切圓。

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set];

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:90 startAngle:0 endAngle:TO_RADIAUS(120) clockwise:YES];

    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    [path stroke];
}

創建一段弧線

使用 + (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwis 這個方法創建一段弧線，介紹一下這個方法中的參數：

ArcCenter: 原點

radius: 半徑

startAngle: 開始角度

endAngle: 結束角度

弧線的參考系：

arc.png

繪制二次貝塞爾曲線

erciquxian.png

使用 - (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint 這個方法繪制二次貝塞爾曲線。曲線段在當前點開始，在指定的點結束，

一個控制點的切線定義。下圖顯示了兩種曲線類型的相似，以及控制點和curve形狀的關系:

oneControl.png

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set];

    UIBezierPath *path = [UIBezierPath bezierPath];

    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    /*
     - (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
     Parameters
     endPoint
     The end point of the curve.
     controlPoint
     The control point of the curve.
     */
    [path moveToPoint:CGPointMake(40, 150)];
    [path addQuadCurveToPoint:CGPointMake(140, 200) controlPoint:CGPointMake(20, 40)];
    [path stroke];
}

繪制三次貝塞爾曲線

sanciquxian.png

使用這個方法繪制三次貝塞爾曲線

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

這個方法繪制三次貝塞爾曲線。曲線段在當前點開始，在指定的點結束，兩個控制點的切線定義。下圖顯示了兩種曲線類型的相似，以及控制點和curve形狀的關系:

twoControl.png

- (void)drawRect:(CGRect)rect {
    /*
     - (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
     Parameters
     endPoint
     The end point of the curve.
     controlPoint1
     The first control point to use when computing the curve.
     controlPoint2
     The second control point to use when computing the curve.
     */

    UIColor *color = [UIColor redColor];
    [color set];

    UIBezierPath *path = [UIBezierPath bezierPath];

    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;

    [path moveToPoint:CGPointMake(20, 200)];
    [path addCurveToPoint:CGPointMake(260, 200) controlPoint1:CGPointMake(140, 0) controlPoint2:CGPointMake(140, 400)];
    [path stroke];
}

畫帶圓角的矩形

daiyuanjuxing.png

使用 + (instancetype)bezierPathWithRect:(CGRect)rect; 這個方法繪制，這個方法和 bezierPathWithRect: 類似，繪制一個帶內切圓的矩形。

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set]; //設置線條顏色

    UIBezierPath* path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 80)];

    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound; //線條拐角
    path.lineJoinStyle = kCGLineJoinRound; //終點處理

    [path stroke];
}

指定矩形的某個角為圓角

yuanjiaojuxing.png

使用 + (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii; 這個方法繪制。參數的意思：rect 繪制矩形的 frame，corners指定使哪個角為圓角，圓角類型為：

typedef NS_OPTIONS(NSUInteger, UIRectCorner) {

UIRectCornerTopLeft = 1 << 0,

UIRectCornerTopRight = 1 << 1,

UIRectCornerBottomLeft = 1 << 2,

UIRectCornerBottomRight = 1 << 3,

UIRectCornerAllCorners = ~0UL

};

用來指定需要設置的角。cornerRadii 圓角的半徑

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set];

    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 100) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)];

    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    path.lineWidth = 5.0;

    [path stroke];
}

小結：

以上列舉的這幾種使用貝塞爾曲線繪制圖形的方法就是我們在開發中經常能遇到的。當然這塊并沒有這么簡單，還有結合 CAShapeLayer 進行自定義動畫等等，有時間會再寫一篇相關知識的總結。最后拉上我寫的這些方法匯合成的小 demo 供大家體會。

來自：http://www.jianshu.com/p/c883fbf52681

本文由用戶 chrissy740 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1479005022342.html

貝塞爾曲線 iOS開發移動開發

iOS UIBezierPath貝塞爾曲線常用方法

小結：

相關經驗

相關資訊

相關文檔

目錄