快速上手IOS 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];
創(chuàng)建三角形
UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(50, 50)]; [path addLineToPoint:CGPointMake(300, 50)]; [path addLineToPoint:CGPointMake(200, 150)]; // 最后的閉合線是可以通過調(diào)用closePath方法來自動生成的,也可以調(diào)用-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)建內(nèi)切曲線
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)建翻轉(zhuǎ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];
路徑進行仿射變換
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)內(nèi)容只有發(fā)生在指定路徑的填充區(qū)域
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)]; [[UIColor greenColor] setStroke]; [path addClip]; [path stroke];
結(jié)語
關于UIBezierPath的簡單介紹就到這了,主要是用代碼做了展示,屬性跟方法,沒詳細去介紹,我覺得可以直接看蘋果的api寫的也蠻清楚的.或者自己試試不同的參數(shù)樣式也能大概理解了.
核心動畫跟貝賽爾曲線都有了簡單的介紹了,接下來就可以動手做點簡單的自定義動畫了.
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關文章
IOS 開發(fā)之自定義按鈕實現(xiàn)文字圖片位置隨意定制
這篇文章主要介紹了IOS 開發(fā)之自定義按鈕實現(xiàn)文字圖片位置隨意定制的相關資料,這里附有實例代碼及實現(xiàn)效果圖,需要的朋友可以參考下2016-12-12iOS App設計模式開發(fā)之適配器模式使用的實戰(zhàn)演練
這篇文章主要介紹了iOS App設計模式開發(fā)之適配器模式的使用實例,示例代碼為傳統(tǒng)的Objective-C語言,需要的朋友可以參考下2016-03-03iOS Xcode創(chuàng)建文件時自動生成的注釋方法
下面小編就為大家分享一篇iOS Xcode創(chuàng)建文件時自動生成的注釋方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01實例講解設計模式中的命令模式在iOS App開發(fā)中的運用
這篇文章主要介紹了設計模式中的命令模式在iOS App開發(fā)中的運用,文中還講到了Cocoa框架下使用的例子,實例代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-03-03iOS使用視聽媒體框架AVFoundation實現(xiàn)照片拍攝
這篇文章主要為大家詳細介紹了iOS使用視聽媒體框架AVFoundation實現(xiàn)照片拍攝,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-04-04iOS AVCaptureSession實現(xiàn)視頻錄制功能
這篇文章主要為大家詳細介紹了iOS AVCaptureSession實現(xiàn)視頻錄制功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-05-05