關於 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：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
- (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 該屬性值指定繪製圓形端點， 線條結尾處繪製一個直徑為線條寬度的半圓。
3、kCGLineCapSquare 該屬性值指定繪製方形端點。 線條結尾處繪製半個邊長為線條寬度的正方形。需要說明的是，這種形狀的端點與“butt”形狀的端點十分相似，只是採用這種形式的端點的線條略長一點而已
）
4、path.lineJoinStyle這個屬性是用來設定兩條線連結點的樣式，同樣它也有三種樣式供我們選擇
(
1、kCGLineJoinMiter 斜接
2、kCGLineJoinRound 圓滑銜接
3、kCGLineJoinBevel 斜角連線
）
5、[path stroke];用 stroke 得到的是不被填充的 view ，[path fill]; 用 fill 得到的內部被填充的 view，這點在下面的程式碼還有繪製得到的圖片中有，可以體會一下這兩者的不同。
繪製多邊形
繪製多邊形，實際上就是又一些直線條連成，主要使用moveToPoint: 和addLineToPoint:方法去建立，moveToPoint:這個方法是設定起始點，意味著從這個點開始，我們就可以使用addLineToPoint:去設定我們想要建立的多邊形經過的點，也就是兩線相交的那個點，用` addLineToPoint:去建立一個形狀的線段，我們可以連續建立line，每一個line的起點都是先前的終點，終點就是指定的點，將線段連線起來就是我們想要建立的多邊形了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
#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];那我們得到的就是一個用線畫的五邊形。
畫矩形或者正方形
大家都知道正方形就是特殊的矩形咯，不多講。只說矩形。
使用+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect這個方法，設定好座標 frame 就好了，就像我們建立 view 一樣，好理解。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
- (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]; } |
建立圓形或者橢圓形
使用+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect這個方法建立圓形或者橢圓形。
傳入的rect矩形引數繪製一個內切曲線，如果我們傳入的rect是矩形就得到矩形的內切橢圓，如果傳入的是 正方形得到的就是正方形的內切圓。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
- (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: 結束角度
clockwise: 是否順時針方向 /
弧線的參考系：
繪製二次貝塞爾曲線
使用- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint這個方法繪製二次貝塞爾曲線。曲線段在當前點開始，在指定的點結束，
一個控制點的切線定義。下圖顯示了兩種曲線型別的相似，以及控制點和curve形狀的關係:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
- (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]; } |
繪製三次貝塞爾曲線
使用這個方法繪製三次貝塞爾曲線
|
1 2 |
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2 Parameters |
這個方法繪製三次貝塞爾曲線。曲線段在當前點開始，在指定的點結束，兩個控制點的切線定義。下圖顯示了兩種曲線型別的相似，以及控制點和curve形狀的關係:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
- (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]; } |
畫帶圓角的矩形
使用+ (instancetype)bezierPathWithRect:(CGRect)rect;這個方法繪製，這個方法和bezierPathWithRect:類似，繪製一個帶內切圓的矩形。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
- (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]; } |
指定矩形的某個角為圓角
使用+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;這個方法繪製。引數的意思：rect 繪製矩形的 frame，corners指定使哪個角為圓角，圓角型別為：typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
UIRectCornerTopLeft = 1 UIRectCornerTopRight = 1 UIRectCornerBottomLeft = 1 UIRectCornerBottomRight = 1 UIRectCornerAllCorners = ~0UL
};用來指定需要設定的角。cornerRadii 圓角的半徑
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
- (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 供大家體會。
連結：https://github.com/irembeu/UIBezierPathMethodsDemo.git
我的個人部落格：
https://irembeu.github.io
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
