UIBezierPath

基礎知識

使用UIBezierPath可以創(chuàng)建基于矢量的路徑,此類是Core Graphics框架關于路徑的封裝。使用此類可以定義簡單的形狀,如橢圓、矩形或者有多個直線和曲線段組成的形狀等。

UIBezierPath是CGPathRef數(shù)據(jù)類型的封裝。如果是基于矢量形狀的路徑,都用直線和曲線去創(chuàng)建。我們使用直線段去創(chuàng)建矩形和多邊形,使用曲線去創(chuàng)建圓弧(arc)、圓或者其他復雜的曲線形狀。
使用UIBezierPath

畫圖步驟:

創(chuàng)建一個UIBezierPath
對象
調用-moveToPoint:
設置初始線段的起點
添加線或者曲線去定義一個或者多個子路徑
改變UIBezierPath
對象跟繪圖相關的屬性。如,我們可以設置畫筆的屬性、填充樣式等

UIBezierPath創(chuàng)建方法介紹
我們先看看UIBezierPath
類提供了哪些創(chuàng)建方式,這些都是工廠方法,直接使用即可。

+ (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;

下面我們一個一個地介紹其用途。

+ (instancetype)bezierPath;

這個使用比較多,因為這個工廠方法創(chuàng)建的對象,我們可以根據(jù)我們的需要任意定制樣式,可以畫任何我們想畫的圖形。

+ (instancetype)bezierPathWithRect:(CGRect)rect;

這個工廠方法根據(jù)一個矩形畫貝塞爾曲線。

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

這個工廠方法根據(jù)一個矩形畫內切曲線。通常用它來畫圓或者橢圓。

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
                        cornerRadius:(CGFloat)cornerRadius;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
                    byRoundingCorners:(UIRectCorner)corners 
                          cornerRadii:(CGSize)cornerRadii;

第一個工廠方法是畫矩形,但是這個矩形是可以畫圓角的。第一個參數(shù)是矩形,第二個參數(shù)是圓角大小。 第二個工廠方法功能是一樣的,但是可以指定某一個角畫成圓角。像這種我們就可以很容易地給UIView
擴展添加圓角的方法了。

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center 
                             radius:(CGFloat)radius 
                         startAngle:(CGFloat)startAngle 
                           endAngle:(CGFloat)endAngle 
                          clockwise:(BOOL)clockwise;

這個工廠方法用于畫弧,參數(shù)說明如下:
center: 弧線中心點的坐標
radius: 弧線所在圓的半徑
startAngle: 弧線開始的角度值
endAngle: 弧線結束的角度值
clockwise: 是否順時針畫弧線
溫馨提示
我們下面的代碼都是在自定義的BezierPathView類中下面的方法中調用:

- (void)drawRect:(CGRect)rect

畫三角形
先看效果圖:


image

// 畫三角形
- (void)drawTrianglePath {

 UIBezierPath *path = [UIBezierPath bezierPath];
 [path moveToPoint:CGPointMake(20, 20)];
 [path addLineToPoint:CGPointMake(self.frame.size.width - 40, 20)];
 [path addLineToPoint:CGPointMake(self.frame.size.width / 2, self.frame.size.height - 20)];

// 最后的閉合線是可以通過調用closePath方法來自動生成的,也可以調用-addLineToPoint:方法來添加
//  [path addLineToPoint:CGPointMake(20, 20)];

[path closePath];

// 設置線寬
path.lineWidth = 1.5;

// 設置填充顏色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];

// 設置畫筆顏色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];

// 根據(jù)我們設置的各個點連線
[path stroke];
}

我們設置畫筆顏色通過set
方法:

UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];

如果我們需要設置填充顏色,比如這里設置為綠色,那么我們需要在設置畫筆顏色之前先設置填充顏色,否則畫筆顏色就被填充顏色替代了。也就是說,如果要讓填充顏色與畫筆顏色不一樣,那么我們的順序必須是先設置填充顏色再設置畫筆顏色。如下,這兩者順序不能改變。因為我們設置填充顏色也是跟設置畫筆顏色一樣調用UIColor的-set方法。

// 設置填充顏色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];

// 設置畫筆顏色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];

畫矩形
先看效果圖:


image

// 畫矩形
- (void)drawRectPath {
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, self.frame.size.width - 40, self.frame.size.height - 40)];

path.lineWidth = 1.5;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinBevel;

// 設置填充顏色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];

// 設置畫筆顏色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];

// 根據(jù)我們設置的各個點連線
[path stroke];
 }
lineCapStyle

屬性是用來設置線條拐角帽的樣式的,其中有三個選擇:

/* Line cap styles. */

typedef CF_ENUM(int32_t, CGLineCap) {
   kCGLineCapButt,  默認的
   kCGLineCapRound, 輕微圓角
   kCGLineCapSquare 第三個正方形
};
lineJoinStyle

屬性是用來設置兩條線連結點的樣式,其中也有三個選擇:

/* Line join styles. */

typedef CF_ENUM(int32_t, CGLineJoin) {
   kCGLineJoinMiter, 默認的表示斜接
   kCGLineJoinRound, 圓滑銜接
   kCGLineJoinBevel 斜角連接
};

畫圓
我們可以使用+ bezierPathWithOvalInRect:
方法來畫圓,當我們傳的rect
參數(shù)是一下正方形時,畫出來的就是圓。
先看效果圖:


image
- (void)drawCiclePath {
  // 傳的是正方形,因此就可以繪制出圓了
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, self.frame.size.width - 40, self.frame.size.width - 40)];

// 設置填充顏色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];

// 設置畫筆顏色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];

// 根據(jù)我們設置的各個點連線
[path stroke];
}

注意:要畫圓,我們需要傳的rect參數(shù)必須是正方形哦!
畫橢圓
先看效果圖:

image

前面我們已經畫圓了,我們可以使用+ bezierPathWithOvalInRect:
方法來畫圓,當我們傳的rect
參數(shù)是一下正方形時,畫出來的就是圓。那么我們要是不傳正方形,那么繪制出來的就是橢圓了。

// 畫橢圓
- (void)drawOvalPath {
// 傳的是不是正方形,因此就可以繪制出橢圓圓了
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, self.frame.size.width - 80, self.frame.size.height - 40)];

// 設置填充顏色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];

// 設置畫筆顏色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];

// 根據(jù)我們設置的各個點連線
[path stroke];
}

畫帶圓角的矩形

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
                        cornerRadius:(CGFloat)cornerRadius;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
                    byRoundingCorners:(UIRectCorner)corners 
                          cornerRadii:(CGSize)cornerRadii;

第一個工廠方法是畫矩形,但是這個矩形是可以畫圓角的。第一個參數(shù)是矩形,第二個參數(shù)是圓角大小。 第二個工廠方法功能是一樣的,但是可以指定某一個角畫成圓角。像這種我們就可以很容易地給UIView
擴展添加圓角的方法了。
四個都是圓角10:


image
- (void)drawRoundedRectPath {
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, self.frame.size.width - 40, self.frame.size.height - 40) cornerRadius:10];

// 設置填充顏色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];

// 設置畫筆顏色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];

// 根據(jù)我們設置的各個點連線
[path stroke];
}

如果要畫只有一個角是圓角,那么我們就修改創(chuàng)建方法:

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, self.frame.size.width - 40, self.frame.size.height - 40) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)];

其中第一個參數(shù)一樣是傳了個矩形,第二個參數(shù)是指定在哪個方向畫圓角,第三個參數(shù)是一個CGSize
類型,用來指定水平和垂直方向的半徑的大小。看下效果圖:


image

畫弧
畫弧前,我們需要了解其參考系,如下圖(圖片來自網絡):


image
 #define   kDegreesToRadians(degrees)  ((pi * degrees)/ 180)
- (void)drawARCPath {
 const CGFloat pi = 3.14159265359;

 CGPoint center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
                                                  radius:100
                                              startAngle:0
                                                endAngle:kDegreesToRadians(135)
                                               clockwise:YES];

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

 UIColor *strokeColor = [UIColor redColor];
 [strokeColor set];
 [path stroke];
}

效果圖如下:


image

我們要明確一點,畫弧參數(shù)startAngle和endAngle
使用的是弧度,而不是角度,因此我們需要將常用的角度轉換成弧度。對于效果圖中,我們設置弧的中心為控件的中心,起點弧度為0,也就是正東方向,而終點是135度角的位置。如果設置的clockwise:YES
是逆時針方向繪制,如果設置為NO,效果如下:


image

這兩者正好是相反的。

畫二次貝塞爾曲線
先來學習一下關于控制點,如下圖(圖片來自網絡):


image

畫二次貝塞爾曲線,是通過調用此方法來實現(xiàn)的:

- (void)drawSecondBezierPath {
UIBezierPath *path = [UIBezierPath bezierPath];

// 首先設置一個起始點
[path moveToPoint:CGPointMake(20, self.frame.size.height - 100)];

// 添加二次曲線
[path addQuadCurveToPoint:CGPointMake(self.frame.size.width - 20, self.frame.size.height - 100)
           controlPoint:CGPointMake(self.frame.size.width / 2, 0)];

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

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

[path stroke];
}

畫二次貝塞爾曲線的步驟:
先設置一個起始點,也就是通過-moveToPoint:
設置
調用-addQuadCurveToPoint:controlPoint:
方法設置終端點和控制點,以畫二次曲線

在效果圖中,拱橋左邊的起始點就是我們設置的起始點,最右邊的終點,就是我們設置的終端點,而我們設置的控制點為(width / 2, 0)對應于紅色矩形中水平方向在正中央,而垂直方向在最頂部。
這個樣式看起來很像sin或者cos函數(shù)吧?這兩個只是特例而已,其實可以畫任意圖形,只是想不到,沒有做不到的。

畫三次貝塞爾曲線
貝塞爾曲線必定通過首尾兩個點,稱為端點;中間兩個點雖然未必要通過,但卻起到牽制曲線形狀路徑的作用,稱作控制點。關于三次貝塞爾曲線的控制器,看下圖:

image

提示:其組成是起始端點+控制點1+控制點2+終止端點
如下方法就是畫三次貝塞爾曲線的關鍵方法,以三個點畫一段曲線,一般和-moveToPoint:
配合使用。

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

看下效果圖:


image

實現(xiàn)代碼是這樣的:

- (void)drawThirdBezierPath {
UIBezierPath *path = [UIBezierPath bezierPath];

 // 設置起始端點
[path moveToPoint:CGPointMake(20, 150)];

[path addCurveToPoint:CGPointMake(300, 150)
      controlPoint1:CGPointMake(160, 0)
      controlPoint2:CGPointMake(160, 250)];

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

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

[path stroke];

}

我們需要注意,這里確定的起始端點為(20,150),終止端點為(300, 150),基水平方向是一致的。控制點1的坐標是(160,0),水平方向相當于在中間附近,這個參數(shù)可以調整。控制點2的坐標是(160,250),如果以兩個端點的連線為水平線,那么就是250-150=100,也就是在水平線下100。這樣看起來就像一個sin
函數(shù)了。
如果感覺這篇文章對您有所幫助,順手點個喜歡,謝謝啦

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容