快速上手IOS UIBezierPath（貝塞爾曲線）

2020-07-26 02:53:30

字體：大中小

來源：轉載

供稿：網友

UIBezierPath主要用來繪制矢量圖形，它是基于Core Graphics對CGPathRef數據類型和path繪圖屬性的一個封裝，所以是需要圖形上下文的（CGContextRef），所以一般UIBezierPath在drawRect中使用。

使用方法

UIBezierPath 是對 CGPathRef 的封裝。創建矢量圖形時，拆解成一或多條線段，拼接起來，每條線段的終點都是下一條線段的起點。

具體地：

1.創建一個 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];

創建三角形

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];

創建矩形

UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 100, 50, 50)];path.lineWidth = 5.0f;[path stroke];

創建內切曲線

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];

創建帶有圓角的矩形，當矩形變成正圓的時候，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];

創建圓弧

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創建路徑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];

創建三次貝塞爾曲線

UIBezierPath *path = [UIBezierPath bezierPath];[path moveToPoint:CGPointMake(100, 200)];[path addCurveToPoint:CGPointMake(300, 200) controlPoint1:CGPointMake(150, 150) controlPoint2:CGPointMake(250, 250)];[path stroke];

創建二次貝塞爾曲線

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];

創建翻轉路徑，即起點變成終點，終點變成起點

 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];

創建虛線

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];

修改當前圖形上下文的繪圖區域可見,隨后的繪圖操作導致呈現內容只有發生在指定路徑的填充區域

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];[[UIColor greenColor] setStroke];[path addClip];[path stroke];