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];
- 創(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];
- 創(chuàng)建矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 100, 50, 50)];
path.lineWidth = 5.0f;
[path stroke];
- 創(chuàng)建內切曲線
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 200, 50, 50)];
path.lineWidth = 5.0f;
[path stroke];
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 200, 50, 100)];
path.lineWidth = 5.0f;
[path stroke];
- 創(chuàng)建帶有圓角的矩形狰挡,當矩形變成正圓的時候捂龄,Radius就不再起作用
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 300, 50, 50) cornerRadius:15.0f];
path.lineWidth = 5.0f;
[path stroke];
- 設定特定的角為圓角的矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 400, 50, 50) byRoundingCorners:UIRectCornerBottomLeft cornerRadii:CGSizeMake(5,5)];
path.lineWidth = 5.0f;
[path stroke];
- 創(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];
- 通過路徑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];
- 創(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];
- 創(chuàng)建二次貝塞爾曲線
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100, 200)];
[path addQuadCurveToPoint:CGPointMake(300, 200) controlPoint:CGPointMake(150, 150)];
[path stroke];
- 添加圓弧
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];
- 追加路徑
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];
- 創(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];
- 路徑進行仿射變換
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];
- 創(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];
- 設置顏色
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
[[UIColor greenColor] setStroke];
[[UIColor redColor] setFill];
[path stroke];
[path fill];
- 設置描邊混合模式
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
[[UIColor greenColor] setStroke];
path.lineWidth = 10.0f;
[path strokeWithBlendMode:kCGBlendModeSaturation alpha:1.0];
[path stroke];
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
[[UIColor redColor] setFill];
[path fillWithBlendMode:kCGBlendModeSaturation alpha:0.6];
[path fill];
- 修改當前圖形上下文的繪圖區(qū)域可見,隨后的繪圖操作導致呈現(xiàn)內容只有發(fā)生在指定路徑的填充區(qū)域
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
[[UIColor greenColor] setStroke];
[path addClip];
[path stroke];
結語
關于UIBezierPath的簡單介紹就到這了,主要是用代碼做了展示,屬性跟方法,沒詳細去介紹,我覺得可以直接看蘋果的api寫的也蠻清楚的.或者自己試試不同的參數(shù)樣式也能大概理解了.另外簡書上看到有篇文章對屬性及方法介紹的蠻詳細的,可以去看看:UIBezierPath
核心動畫跟貝賽爾曲線都有了簡單的介紹了,接下來就可以動手做點簡單的自定義動畫了.會在下一篇更新.