筆者在寫本篇文章之前，也沒有系統(tǒng)學(xué)習(xí)過貝塞爾曲線菩颖，只是曾經(jīng)某一次的需求需要使用到械蹋，才臨時(shí)百度看了一看而且使用最基本的功能。現(xiàn)在總算有時(shí)間停下來好好研究研究這個(gè)神奇而偉大的貝塞爾先生！
筆者在學(xué)習(xí)時(shí)鬓长，首先看了兩遍UIBezierPath
類頭文件定義核蘸，熟悉了一下相關(guān)的屬性和方法巍糯。
支持原創(chuàng)，請(qǐng)閱讀原文
基礎(chǔ)知識(shí)
使用UIBezierPath
可以創(chuàng)建基于矢量的路徑客扎，此類是Core Graphics
框架關(guān)于路徑的封裝祟峦。使用此類可以定義簡(jiǎn)單的形狀，如橢圓徙鱼、矩形或者有多個(gè)直線和曲線段組成的形狀等宅楞。
UIBezierPath
是CGPathRef
數(shù)據(jù)類型的封裝。如果是基于矢量形狀的路徑袱吆，都用直線和曲線去創(chuàng)建厌衙。我們使用直線段去創(chuàng)建矩形和多邊形，使用曲線去創(chuàng)建圓唤嗜蕖（arc）婶希、圓或者其他復(fù)雜的曲線形狀。
使用UIBezierPath
畫圖步驟：
創(chuàng)建一個(gè)UIBezierPath
對(duì)象
調(diào)用-moveToPoint:
設(shè)置初始線段的起點(diǎn)
添加線或者曲線去定義一個(gè)或者多個(gè)子路徑
改變UIBezierPath
對(duì)象跟繪圖相關(guān)的屬性蓬衡。如喻杈，我們可以設(shè)置畫筆的屬性、填充樣式等
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;
下面我們一個(gè)一個(gè)地介紹其用途壁晒。
+ (instancetype)bezierPath;
這個(gè)使用比較多瓷们，因?yàn)檫@個(gè)工廠方法創(chuàng)建的對(duì)象，我們可以根據(jù)我們的需要任意定制樣式讨衣，可以畫任何我們想畫的圖形换棚。
+ (instancetype)bezierPathWithRect:(CGRect)rect;
這個(gè)工廠方法根據(jù)一個(gè)矩形畫貝塞爾曲線。
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
這個(gè)工廠方法根據(jù)一個(gè)矩形畫內(nèi)切曲線反镇。通常用它來畫圓或者橢圓固蚤。
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
cornerRadius:(CGFloat)cornerRadius;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
byRoundingCorners:(UIRectCorner)corners
cornerRadii:(CGSize)cornerRadii;
第一個(gè)工廠方法是畫矩形，但是這個(gè)矩形是可以畫圓角的歹茶。第一個(gè)參數(shù)是矩形夕玩，第二個(gè)參數(shù)是圓角大小你弦。 第二個(gè)工廠方法功能是一樣的，但是可以指定某一個(gè)角畫成圓角燎孟。像這種我們就可以很容易地給UIView
擴(kuò)展添加圓角的方法了禽作。
- (instancetype)bezierPathWithArcCenter:(CGPoint)center
radius:(CGFloat)radius
startAngle:(CGFloat)startAngle
endAngle:(CGFloat)endAngle
clockwise:(BOOL)clockwise;
這個(gè)工廠方法用于畫弧，參數(shù)說明如下： center
: 弧線中心點(diǎn)的坐標(biāo) radius
: 弧線所在圓的半徑 startAngle
: 弧線開始的角度值 endAngle
: 弧線結(jié)束的角度值 clockwise
: 是否順時(shí)針畫弧線
溫馨提示：我們下面的代碼都是在自定義的BezierPathView類中的- (void)drawRect:(CGRect)rect
方法中調(diào)用
畫三角形
先看效果圖：
// 畫三角形
- (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)];
// 最后的閉合線是可以通過調(diào)用closePath方法來自動(dòng)生成的揩页，也可以調(diào)用-addLineToPoint:方法來添加
// [path addLineToPoint:CGPointMake(20, 20)];
[path closePath];
// 設(shè)置線寬
path.lineWidth = 1.5;
// 設(shè)置填充顏色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];
// 設(shè)置畫筆顏色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
// 根據(jù)我們?cè)O(shè)置的各個(gè)點(diǎn)連線
[path stroke];
}
我們?cè)O(shè)置畫筆顏色通過set
方法：
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
如果我們需要設(shè)置填充顏色旷偿，比如這里設(shè)置為綠色，那么我們需要在設(shè)置畫筆顏色之前先設(shè)置填充顏色爆侣，否則畫筆顏色就被填充顏色替代了萍程。也就是說，如果要讓填充顏色與畫筆顏色不一樣兔仰，那么我們的順序必須是先設(shè)置填充顏色再設(shè)置畫筆顏色茫负。如下，這兩者順序不能改變乎赴。因?yàn)槲覀冊(cè)O(shè)置填充顏色也是跟設(shè)置畫筆顏色一樣調(diào)用UIColor
的-set
方法忍法。
// 設(shè)置填充顏色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];
// 設(shè)置畫筆顏色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
畫矩形
先看效果圖：
// 畫矩形
- (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;
// 設(shè)置填充顏色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];
// 設(shè)置畫筆顏色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
// 根據(jù)我們?cè)O(shè)置的各個(gè)點(diǎn)連線
[path stroke];
}
lineCapStyle
屬性是用來設(shè)置線條拐角帽的樣式的，其中有三個(gè)選擇：
/* Line cap styles. */
typedef CF_ENUM(int32_t, CGLineCap) {
kCGLineCapButt,
kCGLineCapRound,
kCGLineCapSquare
};
其中榕吼，第一個(gè)是默認(rèn)的饿序，第二個(gè)是輕微圓角，第三個(gè)正方形羹蚣。
lineJoinStyle
屬性是用來設(shè)置兩條線連結(jié)點(diǎn)的樣式嗤堰，其中也有三個(gè)選擇：
/* Line join styles. */
typedef CF_ENUM(int32_t, CGLineJoin) {
kCGLineJoinMiter,
kCGLineJoinRound,
kCGLineJoinBevel
};
其中，第一個(gè)是默認(rèn)的表示斜接度宦，第二個(gè)是圓滑銜接，第三個(gè)是斜角連接告匠。
畫圓
我們可以使用+ bezierPathWithOvalInRect:
方法來畫圓戈抄，當(dāng)我們傳的rect
參數(shù)是一下正方形時(shí)，畫出來的就是圓后专。
先看效果圖：
- (void)drawCiclePath {
// 傳的是正方形划鸽，因此就可以繪制出圓了
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, self.frame.size.width - 40, self.frame.size.width - 40)];
// 設(shè)置填充顏色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];
// 設(shè)置畫筆顏色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
// 根據(jù)我們?cè)O(shè)置的各個(gè)點(diǎn)連線
[path stroke];
}
注意：要畫圓，我們需要傳的rect
參數(shù)必須是正方形哦戚哎！
畫橢圓
先看效果圖：
前面我們已經(jīng)畫圓了裸诽，我們可以使用+ bezierPathWithOvalInRect:
方法來畫圓，當(dāng)我們傳的rect
參數(shù)是一下正方形時(shí)型凳，畫出來的就是圓丈冬。那么我們要是不傳正方形，那么繪制出來的就是橢圓了甘畅。
// 畫橢圓
- (void)drawOvalPath {
// 傳的是不是正方形埂蕊，因此就可以繪制出橢圓圓了
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, self.frame.size.width - 80, self.frame.size.height - 40)];
// 設(shè)置填充顏色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];
// 設(shè)置畫筆顏色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
// 根據(jù)我們?cè)O(shè)置的各個(gè)點(diǎn)連線
[path stroke];
}
畫帶圓角的矩形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
cornerRadius:(CGFloat)cornerRadius;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
byRoundingCorners:(UIRectCorner)corners
cornerRadii:(CGSize)cornerRadii;
第一個(gè)工廠方法是畫矩形往弓，但是這個(gè)矩形是可以畫圓角的。第一個(gè)參數(shù)是矩形蓄氧，第二個(gè)參數(shù)是圓角大小函似。 第二個(gè)工廠方法功能是一樣的，但是可以指定某一個(gè)角畫成圓角喉童。像這種我們就可以很容易地給UIView
擴(kuò)展添加圓角的方法了撇寞。
四個(gè)都是圓角10：
- (void)drawRoundedRectPath {
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, self.frame.size.width - 40, self.frame.size.height - 40) cornerRadius:10];
// 設(shè)置填充顏色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];
// 設(shè)置畫筆顏色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
// 根據(jù)我們?cè)O(shè)置的各個(gè)點(diǎn)連線
[path stroke];
}
如果要畫只有一個(gè)角是圓角，那么我們就修改創(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)];
其中第一個(gè)參數(shù)一樣是傳了個(gè)矩形堂氯，第二個(gè)參數(shù)是指定在哪個(gè)方向畫圓角蔑担，第三個(gè)參數(shù)是一個(gè)CGSize
類型，用來指定水平和垂直方向的半徑的大小祖灰≈优妫看下效果圖：
畫弧
畫弧前，我們需要了解其參考系局扶，如下圖（圖片來自網(wǎng)絡(luò)）：
#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];
}
效果圖如下：
我們要明確一點(diǎn)恨统，畫弧參數(shù)startAngle
和endAngle
使用的是弧度，而不是角度三妈，因此我們需要將常用的角度轉(zhuǎn)換成弧度畜埋。對(duì)于效果圖中，我們?cè)O(shè)置弧的中心為控件的中心畴蒲，起點(diǎn)弧度為0悠鞍，也就是正東方向，而終點(diǎn)是135度角的位置模燥。如果設(shè)置的clockwise:YES
是逆時(shí)針方向繪制咖祭，如果設(shè)置為NO
，效果如下：
這兩者正好是相反的蔫骂。
畫二次貝塞爾曲線
先來學(xué)習(xí)一下關(guān)于控制點(diǎn)么翰，如下圖（圖片來自網(wǎng)絡(luò)）：
畫二次貝塞爾曲線，是通過調(diào)用此方法來實(shí)現(xiàn)的：
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
參數(shù)說明：
endPoint
：終端點(diǎn)controlPoint
：控制點(diǎn)辽旋，對(duì)于二次貝塞爾曲線浩嫌，只有一個(gè)控制點(diǎn)
看效果圖：
- (void)drawSecondBezierPath {
UIBezierPath *path = [UIBezierPath bezierPath];
// 首先設(shè)置一個(gè)起始點(diǎn)
[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];
}
畫二次貝塞爾曲線的步驟：
先設(shè)置一個(gè)起始點(diǎn)，也就是通過-moveToPoint:
設(shè)置
調(diào)用-addQuadCurveToPoint:controlPoint:
方法設(shè)置終端點(diǎn)和控制點(diǎn)补胚，以畫二次曲線
在效果圖中码耐，拱橋左邊的起始點(diǎn)就是我們?cè)O(shè)置的起始點(diǎn)，最右邊的終點(diǎn)溶其，就是我們?cè)O(shè)置的終端點(diǎn)骚腥，而我們?cè)O(shè)置的控制點(diǎn)為（width / 2, 0）對(duì)應(yīng)于紅色矩形中水平方向在正中央，而垂直方向在最頂部瓶逃。
這個(gè)樣式看起來很像sin
或者cos
函數(shù)吧桦沉？這兩個(gè)只是特例而已每瞒，其實(shí)可以畫任意圖形，只是想不到纯露，沒有做不到的剿骨。
畫三次貝塞爾曲線
貝塞爾曲線必定通過首尾兩個(gè)點(diǎn)，稱為端點(diǎn)埠褪；中間兩個(gè)點(diǎn)雖然未必要通過浓利，但卻起到牽制曲線形狀路徑的作用，稱作控制點(diǎn)钞速。關(guān)于三次貝塞爾曲線的控制器贷掖，看下圖：
提示：其組成是起始端點(diǎn)+控制點(diǎn)1+控制點(diǎn)2+終止端點(diǎn)
如下方法就是畫三次貝塞爾曲線的關(guān)鍵方法，以三個(gè)點(diǎn)畫一段曲線渴语，一般和-moveToPoint:
配合使用苹威。
- (void)addCurveToPoint:(CGPoint)endPoint
controlPoint1:(CGPoint)controlPoint1
controlPoint2:(CGPoint)controlPoint2
看下效果圖：
實(shí)現(xiàn)代碼是這樣的：
- (void)drawThirdBezierPath {
UIBezierPath *path = [UIBezierPath bezierPath];
// 設(shè)置起始端點(diǎn)
[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];
}
我們需要注意，這里確定的起始端點(diǎn)為(20,150)驾凶，終止端點(diǎn)為(300, 150)牙甫，基水平方向是一致的〉魑ィ控制點(diǎn)1的坐標(biāo)是（160窟哺，0），水平方向相當(dāng)于在中間附近技肩，這個(gè)參數(shù)可以調(diào)整且轨。控制點(diǎn)2的坐標(biāo)是（160虚婿，250）旋奢，如果以兩個(gè)端點(diǎn)的連線為水平線，那么就是250-150=100然痊，也就是在水平線下100黄绩。這樣看起來就像一個(gè)sin
函數(shù)了。
/* 源代碼下載
小伙伴們可以到github下載：https://github.com/CoderJackyHuang/UIBezierPathLayerDemos */
