快速上手UIBezierPath

UIBezierPath主要用來繪制矢量圖形给梅,它是基于Core Graphics對CGPathRef數(shù)據(jù)類型和path繪圖屬性的一個封裝鹏氧,所以是需要圖形上下文的(CGContextRef)醇滥,所以一般UIBezierPath在drawRect中使用。

使用方法

UIBezierPath 是對 CGPathRef 的封裝斩郎。創(chuàng)建矢量圖形時,拆解成一或多條線段喻频,拼接起來缩宜,每條線段的終點都是下一條線段的起點。

具體地:

1.創(chuàng)建一個 UIBezierPath 對象
2.用 moveToPoint: 設置初始線段的起點
3.添加線段甥温,定義一或多個子路徑
4.修改 UIBezierPath 的繪圖相關的屬性锻煌,比如stroke path的屬性 lineWidth 和 lineJoinStyle ,filled path的屬性 usesEvenOddFillRule

注意:如果是矩形或者圓之類的特殊圖形姻蚓,可以不用第2步宋梧。

代碼案例

  • 畫直線
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(100, 50)];
    
    path.lineWidth = 5.0f;
    path.lineJoinStyle = kCGLineJoinRound;
    
    [path stroke];
直線.png
  • 創(chuàng)建三角形
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(300, 50)];
    [path addLineToPoint:CGPointMake(200, 150)];
    
    // 最后的閉合線是可以通過調用closePath方法來自動生成的,也可以調用-addLineToPoint:方法來添加
    //  [path addLineToPoint:CGPointMake(50, 50)];

    [path closePath];
    
    path.lineWidth = 5.0f;

    [path stroke];
三角形.png
  • 創(chuàng)建矩形
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 100, 50, 50)];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
矩形.png
  • 創(chuàng)建內切曲線
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 200, 50, 50)];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
圓.png
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 200, 50, 100)];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
橢圓.png
  • 創(chuàng)建帶有圓角的矩形狰挡,當矩形變成正圓的時候捂龄,Radius就不再起作用
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 300, 50, 50) cornerRadius:15.0f];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
帶有圓角的矩形.png
  • 設定特定的角為圓角的矩形
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 400, 50, 50) byRoundingCorners:UIRectCornerBottomLeft cornerRadii:CGSizeMake(5,5)];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
特定的角為圓角的矩形.png
  • 創(chuàng)建圓弧
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 550) radius:25 startAngle:0 endAngle:1.5*M_PI clockwise:YES];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
創(chuàng)建圓弧.png
  • 通過路徑A創(chuàng)建路徑B
    UIBezierPath *path_A = [UIBezierPath bezierPath];
    
    [path_A moveToPoint:CGPointMake(200, 50)];
    
    [path_A addLineToPoint:CGPointMake(250, 100)];
    
    path_A.lineWidth = 5.0f;

    UIBezierPath *path_B = [UIBezierPath bezierPathWithCGPath:path_A.CGPath];
    
    [path_B stroke];
通過路徑A創(chuàng)建路徑B.png
  • 創(chuàng)建三次貝塞爾曲線
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(100, 200)];
    
    [path addCurveToPoint:CGPointMake(300, 200) controlPoint1:CGPointMake(150, 150) controlPoint2:CGPointMake(250, 250)];
    
    [path stroke];
三次貝塞爾曲線.png
  • 創(chuàng)建二次貝塞爾曲線
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(100, 200)];
    
    [path addQuadCurveToPoint:CGPointMake(300, 200) controlPoint:CGPointMake(150, 150)];
    
    [path stroke];
二次貝塞爾曲線.png
  • 添加圓弧
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(200, 400)];
    [path addLineToPoint:CGPointMake(225, 410)];
    
    [path addArcWithCenter:CGPointMake(200, 400) radius:25 startAngle:0 endAngle:1.5*M_PI clockwise:YES];
    
//    [path closePath];
//    [path removeAllPoints];
    
    [path stroke];
添加圓弧.png
  • 追加路徑
    UIBezierPath *path_A = [UIBezierPath bezierPath];
    
    [path_A moveToPoint:CGPointMake(200, 500)];
    [path_A addLineToPoint:CGPointMake(225, 410)];
    
    UIBezierPath *path_B = [UIBezierPath bezierPath];
    
    [path_B moveToPoint:CGPointMake(200, 600)];
    [path_B addLineToPoint:CGPointMake(225, 500)];
    
    [path_A appendPath:path_B];
    
    [path_A stroke];
追加路徑.png
  • 創(chuàng)建翻轉路徑,即起點變成終點加叁,終點變成起點
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(100, 50)];
    
    path.lineWidth = 5.0f;
    
    NSLog(@"%@",NSStringFromCGPoint(path.currentPoint));
    
    UIBezierPath *path_b = [path bezierPathByReversingPath];
    CGAffineTransform transform = CGAffineTransformMakeTranslation(200, 0);
    [path_b applyTransform: transform];
    // 兩條路徑分別添加一條直接到 self.center
    [path addLineToPoint: CGPointMake(self.frame.size.width*0.5, self.frame.size.height*0.5)];
    [path_b addLineToPoint: CGPointMake(self.frame.size.width*0.5, self.frame.size.height*0.5)];
    
    NSLog(@"%@",NSStringFromCGPoint(path_b.currentPoint));
    [[UIColor redColor] set];
    [path stroke];
    [[UIColor blueColor] set];
    [path_b stroke];
創(chuàng)建翻轉路徑.png
  • 路徑進行仿射變換
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(100, 50)];
    [path addLineToPoint:CGPointMake(200, 50)];
    
    CGAffineTransform transform =  CGAffineTransformRotate(self.transform, M_PI_4);
    [path applyTransform:transform];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
仿射變換.png
  • 創(chuàng)建虛線
    CGFloat dashStyle[] = {1.0f, 2.0f};

    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(100, 50)];
    
    [path setLineDash:dashStyle count:2 phase:0.0];
    
    [path stroke];
創(chuàng)建虛線.png
  • 設置顏色
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
    
    [[UIColor greenColor] setStroke];
    
    [[UIColor redColor] setFill];
    
    [path stroke];
    [path fill];
屏幕快照 2017-01-19 下午1.49.31.png
  • 設置描邊混合模式
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
    
    [[UIColor greenColor] setStroke];
    
    path.lineWidth = 10.0f;
    
    [path strokeWithBlendMode:kCGBlendModeSaturation alpha:1.0];
    
    [path stroke];
Stroke混合.png
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
    
    [[UIColor redColor] setFill];
    
    [path fillWithBlendMode:kCGBlendModeSaturation alpha:0.6];
    
    [path fill];
Fill混合.png
  • 修改當前圖形上下文的繪圖區(qū)域可見,隨后的繪圖操作導致呈現(xiàn)內容只有發(fā)生在指定路徑的填充區(qū)域
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
    
    [[UIColor greenColor] setStroke];
    
    [path addClip];
    
    [path stroke];
Clip.png

結語

關于UIBezierPath的簡單介紹就到這了,主要是用代碼做了展示,屬性跟方法,沒詳細去介紹,我覺得可以直接看蘋果的api寫的也蠻清楚的.或者自己試試不同的參數(shù)樣式也能大概理解了.另外簡書上看到有篇文章對屬性及方法介紹的蠻詳細的,可以去看看:UIBezierPath

核心動畫跟貝賽爾曲線都有了簡單的介紹了,接下來就可以動手做點簡單的自定義動畫了.會在下一篇更新.

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末倦沧,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子它匕,更是在濱河造成了極大的恐慌展融,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件豫柬,死亡現(xiàn)場離奇詭異告希,居然都是意外死亡,警方通過查閱死者的電腦和手機轮傍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進店門暂雹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人创夜,你說我怎么就攤上這事杭跪。” “怎么了?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵涧尿,是天一觀的道長系奉。 經常有香客問我,道長姑廉,這世上最難降的妖魔是什么缺亮? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮桥言,結果婚禮上萌踱,老公的妹妹穿的比我還像新娘。我一直安慰自己号阿,他們只是感情好并鸵,可當我...
    茶點故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著扔涧,像睡著了一般园担。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上枯夜,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天弯汰,我揣著相機與錄音,去河邊找鬼湖雹。 笑死咏闪,一個胖子當著我的面吹牛,可吹牛的內容都是我干的劝枣。 我是一名探鬼主播汤踏,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼织鲸,長吁一口氣:“原來是場噩夢啊……” “哼舔腾!你這毒婦竟也來了?” 一聲冷哼從身側響起搂擦,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤稳诚,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后瀑踢,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扳还,經...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年橱夭,在試婚紗的時候發(fā)現(xiàn)自己被綠了氨距。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡棘劣,死狀恐怖俏让,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤首昔,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布寡喝,位于F島的核電站,受9級特大地震影響勒奇,放射性物質發(fā)生泄漏预鬓。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一赊颠、第九天 我趴在偏房一處隱蔽的房頂上張望格二。 院中可真熱鬧,春花似錦竣蹦、人聲如沸蟋定。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽驶兜。三九已至,卻和暖如春远寸,著一層夾襖步出監(jiān)牢的瞬間抄淑,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工驰后, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留肆资,地道東北人。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓灶芝,卻偏偏與公主長得像郑原,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子夜涕,可洞房花燭夜當晚...
    茶點故事閱讀 42,828評論 2 345

推薦閱讀更多精彩內容