溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-08-23 13:34:48 來源：腳本之家 閱讀：1206 作者：洛洛愛吃肉 欄目：移動(dòng)開發(fā)

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

使用方法

UIBezierPath 是對(duì) CGPathRef 的封裝。創(chuàng)建矢量圖形時(shí)，拆解成一或多條線段，拼接起來，每條線段的終點(diǎn)都是下一條線段的起點(diǎn)。

具體地：

1.創(chuàng)建一個(gè) UIBezierPath 對(duì)象

2.用 moveToPoint: 設(shè)置初始線段的起點(diǎn)

3.添加線段，定義一或多個(gè)子路徑

4.修改 UIBezierPath 的繪圖相關(guān)的屬性，比如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];

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

創(chuàng)建三角形

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 50)];
[path addLineToPoint:CGPointMake(300, 50)];
[path addLineToPoint:CGPointMake(200, 150)];
// 最后的閉合線是可以通過調(diào)用closePath方法來自動(dòng)生成的，也可以調(diào)用-addLineToPoint:方法來添加
// [path addLineToPoint:CGPointMake(50, 50)];
[path closePath];
path.lineWidth = 5.0f;
[path stroke];

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

創(chuàng)建矩形

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

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

創(chuàng)建內(nèi)切曲線

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

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

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

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

創(chuàng)建帶有圓角的矩形，當(dāng)矩形變成正圓的時(shí)候，Radius就不再起作用

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 300, 50, 50) cornerRadius:15.0f];
path.lineWidth = 5.0f;
[path stroke];

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

設(shè)定特定的角為圓角的矩形

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 400, 50, 50) byRoundingCorners:UIRectCornerBottomLeft cornerRadii:CGSizeMake(5,5)];
path.lineWidth = 5.0f;
[path stroke];

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

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

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

通過路徑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];

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

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

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

創(chuàng)建二次貝塞爾曲線

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100, 200)];
[path addQuadCurveToPoint:CGPointMake(300, 200) controlPoint:CGPointMake(150, 150)];
[path stroke];

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

添加圓弧

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

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

追加路徑

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

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

創(chuàng)建翻轉(zhuǎn)路徑，即起點(diǎn)變成終點(diǎn)，終點(diǎn)變成起點(diǎn)

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

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

路徑進(jìn)行仿射變換

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

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

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

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

設(shè)置顏色

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

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

設(shè)置描邊混合模式

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
[[UIColor greenColor] setStroke];
path.lineWidth = 10.0f;
[path strokeWithBlendMode:kCGBlendModeSaturation alpha:1.0];
[path stroke];

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

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
 [[UIColor redColor] setFill];
 [path fillWithBlendMode:kCGBlendModeSaturation alpha:0.6];
 [path fill];

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

修改當(dāng)前圖形上下文的繪圖區(qū)域可見,隨后的繪圖操作導(dǎo)致呈現(xiàn)內(nèi)容只有發(fā)生在指定路徑的填充區(qū)域

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

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

結(jié)語

關(guān)于UIBezierPath的簡(jiǎn)單介紹就到這了,主要是用代碼做了展示,屬性跟方法,沒詳細(xì)去介紹,我覺得可以直接看蘋果的api寫的也蠻清楚的.或者自己試試不同的參數(shù)樣式也能大概理解了.

核心動(dòng)畫跟貝賽爾曲線都有了簡(jiǎn)單的介紹了,接下來就可以動(dòng)手做點(diǎn)簡(jiǎn)單的自定義動(dòng)畫了.

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持億速云！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手