初識(shí)貝塞爾曲線

1.UIBezierPath簡(jiǎn)介

UIBezierPath類是Core Graphics框架關(guān)于path的一個(gè)封裝祈餐。可以定義簡(jiǎn)單的形狀,如橢圓或者矩形月幌,或者有多個(gè)直線和曲線段組成的形狀。

2.使用UIBezierPath繪圖的優(yōu)點(diǎn)

使用方便悬蔽,易于閱讀扯躺,便于管理

3.初識(shí)UIBezierPath中的常用的屬性和方法

Drawing properties

@property(nonatomic) CGFloat lineWidth;//線寬
//終點(diǎn)連接類型
 kCGLineCapButt,//斜角連接
 kCGLineCapRound,//圓滑銜接 
 kCGLineCapSquare//斜角連接
@property(nonatomic) CGLineCap lineCapStyle;
//交叉點(diǎn)的類型
 kCGLineJoinMiter
 kCGLineJoinRound
 kCGLineJoinBevel
@property(nonatomic) CGLineJoin lineJoinStyle;
@property(nonatomic) CGFloat miterLimit; // 兩條線交匯處內(nèi)角和外角之間的最大距離,需要交叉點(diǎn)類型為kCGLineJoinMiter是生效,最大限制為10,這個(gè)限制值有助于避免在連接線段志堅(jiān)的尖峰
@property(nonatomic) CGFloat flatness;// 個(gè)人理解為繪線的精細(xì)程度蝎困,默認(rèn)為0.6录语,數(shù)值越大,需要處理的時(shí)間越長(zhǎng)
@property(nonatomic) BOOL usesEvenOddFillRule;  // 決定是否使用even-odd或者non-zero規(guī)則

path construction

//設(shè)置畫(huà)筆的起始點(diǎn)
- (void)moveToPoint:(CGPoint)point;
//從當(dāng)前點(diǎn)到指定點(diǎn)繪制直線
- (void)addLineToPoint:(CGPoint)point;
//添加貝塞爾曲線
//endPoint終點(diǎn) controlPoint1禾乘、controlPoint2控制點(diǎn)
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
//endPoint終點(diǎn) controlPoint控制點(diǎn)
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
//添加弧線
 center弧線圓心坐標(biāo) radius弧線半徑 startAngle弧線起始角度 endAngle弧線結(jié)束角度 clockwise是否順時(shí)針繪制
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise 
//閉合路徑澎埠,封閉未形成閉環(huán)的路徑
- (void)closePath;
//移除所有的點(diǎn),刪除所有的subPath
- (void)removeAllPoints;
//追加bezierPath路徑
- (void)appendPath:(UIBezierPath *)bezierPath;
// 創(chuàng)建并返回一個(gè)新的反轉(zhuǎn)內(nèi)容的當(dāng)前路徑曲線路徑的對(duì)象始藕。
- (UIBezierPath *)bezierPathByReversingPath 
// 用指定的仿射變換矩陣變換路徑的所有點(diǎn)
- (void)applyTransform:(CGAffineTransform)transform;
//填充
- (void)fill; 
//路徑繪制
- (void)stroke; 
//在這以后的圖形繪制超出當(dāng)前路徑范圍則不可見(jiàn)
- (void)addClip; 

4.畫(huà)圖示例代碼

直線圖

// 設(shè)置線的填充色
  [[UIColor redColor] setStroke];
  // 新建一個(gè)bezier對(duì)象
  UIBezierPath *bezierPath = [UIBezierPath bezierPath];
  // 設(shè)置線寬度
  bezierPath.lineWidth = 10;
  // 設(shè)置線兩頭樣式
  bezierPath.lineCapStyle = kCGLineCapRound;
  // 設(shè)置起點(diǎn)蒲稳、終點(diǎn)坐標(biāo)
  [bezierPath moveToPoint:CGPointMake(10, 10)];
  [bezierPath addLineToPoint:CGPointMake(100, 100)];
  // 開(kāi)始繪制
  [bezierPath stroke];

矩形圖

// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象,此對(duì)象用于繪制矩形伍派,需要傳入繪制的矩形的Frame
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 50, 50)];
// 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 設(shè)置線兩頭樣式
bezierPath.lineCapStyle = kCGLineCapRound;
 // 開(kāi)始繪制
[bezierPath stroke];

圓角矩形

// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象江耀,此對(duì)象用于繪制一個(gè)圓角矩形
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 50, 50)cornerRadius:10];
// 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 開(kāi)始繪制
[bezierPath stroke];
// rect: 需要畫(huà)的矩形的Frame 
//corners: 哪些部位需要畫(huà)成圓角  
//cornerRadius: 圓角的Size

部分圓角矩形

// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象,此對(duì)象用于繪制一個(gè)部分圓角的矩形诉植,左上祥国、右下
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 50, 50) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(10, 10)];
// 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 開(kāi)始繪制
[bezierPath stroke];

// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象,此對(duì)象用于繪制內(nèi)切圓晾腔,需要傳入繪制內(nèi)切圓的矩形的Frame
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 50, 50)];
// 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 設(shè)置線兩頭樣式
bezierPath.lineCapStyle = kCGLineCapRound;
// 開(kāi)始繪制
[bezierPath stroke];
//center: 圓心坐標(biāo) 
//radius: 圓的半徑 
//startAngle: 繪制起始點(diǎn)角度 
//endAngle: 繪制終點(diǎn)角度 
//clockwise: 是否順時(shí)針 

圓弧

// 設(shè)置線的填充色 
[[UIColor redColor] setStroke]; 
// 新建一個(gè)bezier對(duì)象舌稀,此對(duì)象用于繪制一個(gè)圓弧 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:110 startAngle:0 endAngle:M_PI_2 clockwise:NO]; // 設(shè)置線寬度 
bezierPath.lineWidth = 10;  
// 開(kāi)始繪制 
[bezierPath stroke];

二階曲線

// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
// 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 設(shè)置線兩頭樣式
bezierPath.lineCapStyle = kCGLineCapRound;
// 設(shè)置起點(diǎn)、終點(diǎn)坐標(biāo)
[bezierPath moveToPoint:CGPointMake(100, 100)];
[bezierPath addQuadCurveToPoint:CGPointMake(200, 200) controlPoint:CGPointMake(300, 0)];
// 開(kāi)始繪制
[bezierPath stroke];

三階曲線

// 設(shè)置線的填充色 
[[UIColor redColor] setStroke];  
// 新建一個(gè)bezier對(duì)象 
UIBezierPath *bezierPath = [UIBezierPath bezierPath]; 
// 設(shè)置線寬度 
bezierPath.lineWidth = 10; 
// 設(shè)置線兩頭樣式 
bezierPath.lineCapStyle = kCGLineCapRound; 
// 設(shè)置起點(diǎn)灼擂、終點(diǎn)坐標(biāo) 
[bezierPath moveToPoint:CGPointMake(100, 100)]; [bezierPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(150, 0) controlPoint2:CGPointMake(150, 300)];  
// 開(kāi)始繪制 
[bezierPath stroke];

多階曲線

// 設(shè)置線的填充色 
[[UIColor redColor] setStroke];  
// 新建一個(gè)bezier對(duì)象 
UIBezierPath *bezierPath = [UIBezierPath bezierPath]; 
// 設(shè)置線寬度 
bezierPath.lineWidth = 10; 
// 設(shè)置線兩頭樣式 
bezierPath.lineCapStyle = kCGLineCapRound; 
// 設(shè)置起點(diǎn)壁查、終點(diǎn)坐標(biāo) 
[bezierPath moveToPoint:CGPointMake(100, 100)]; [bezierPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(150, 0) controlPoint2:CGPointMake(150, 300)];  
// 創(chuàng)建第二條貝塞爾曲線 
UIBezierPath *bezierPath2 = [UIBezierPath bezierPath]; // 設(shè)置起點(diǎn)、終點(diǎn)坐標(biāo) 
[bezierPath2 moveToPoint:CGPointMake(200, 200)]; [bezierPath2 addCurveToPoint:CGPointMake(290, 290) controlPoint1:CGPointMake(250, 0) controlPoint2:CGPointMake(250, 300)]; 
// 將第二條線剔应,加到第一條線上面去 
[bezierPath appendPath:bezierPath2];  
// 開(kāi)始繪制 
[bezierPath stroke];

4.github demo地址

https://github.com/smallSmallWhite/BezierCurve.git

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末睡腿,一起剝皮案震驚了整個(gè)濱河市康谆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌嫉到,老刑警劉巖沃暗,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異何恶,居然都是意外死亡孽锥,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)细层,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)惜辑,“玉大人,你說(shuō)我怎么就攤上這事疫赎∈⒊牛” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵捧搞,是天一觀的道長(zhǎng)抵卫。 經(jīng)常有香客問(wèn)我,道長(zhǎng)胎撇,這世上最難降的妖魔是什么介粘? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮晚树,結(jié)果婚禮上姻采,老公的妹妹穿的比我還像新娘。我一直安慰自己爵憎,他們只是感情好慨亲,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著宝鼓,像睡著了一般刑棵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上席函,一...
    開(kāi)封第一講書(shū)人閱讀 52,696評(píng)論 1 312
  • 那天铐望,我揣著相機(jī)與錄音冈涧,去河邊找鬼茂附。 笑死,一個(gè)胖子當(dāng)著我的面吹牛督弓,可吹牛的內(nèi)容都是我干的营曼。 我是一名探鬼主播,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼愚隧,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蒂阱!你這毒婦竟也來(lái)了锻全?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤录煤,失蹤者是張志新(化名)和其女友劉穎鳄厌,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體妈踊,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡了嚎,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了廊营。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片歪泳。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖露筒,靈堂內(nèi)的尸體忽然破棺而出呐伞,到底是詐尸還是另有隱情,我是刑警寧澤慎式,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布伶氢,位于F島的核電站,受9級(jí)特大地震影響瘪吏,放射性物質(zhì)發(fā)生泄漏鞍历。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一肪虎、第九天 我趴在偏房一處隱蔽的房頂上張望劣砍。 院中可真熱鬧,春花似錦扇救、人聲如沸刑枝。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)装畅。三九已至,卻和暖如春沧烈,著一層夾襖步出監(jiān)牢的瞬間掠兄,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工锌雀, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蚂夕,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓腋逆,卻偏偏與公主長(zhǎng)得像婿牍,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子惩歉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容