1.UIBezierPath簡(jiǎn)介
UIBezierPath類是Core Graphics框架關(guān)于path的一個(gè)封裝祈餐。可以定義簡(jiǎn)單的形狀,如橢圓或者矩形月幌,或者有多個(gè)直線和曲線段組成的形狀。
2.使用UIBezierPath繪圖的優(yōu)點(diǎn)
使用方便悬蔽,易于閱讀扯躺,便于管理
3.初識(shí)UIBezierPath中的常用的屬性和方法
Drawing properties
@property(nonatomic) CGFloat lineWidth;//線寬
//終點(diǎn)連接類型
kCGLineCapButt,//斜角連接
kCGLineCapRound,//圓滑銜接
kCGLineCapSquare//斜角連接
@property(nonatomic) CGLineCap lineCapStyle;
//交叉點(diǎn)的類型
kCGLineJoinMiter
kCGLineJoinRound
kCGLineJoinBevel
@property(nonatomic) CGLineJoin lineJoinStyle;
@property(nonatomic) CGFloat miterLimit; // 兩條線交匯處內(nèi)角和外角之間的最大距離,需要交叉點(diǎn)類型為kCGLineJoinMiter是生效,最大限制為10,這個(gè)限制值有助于避免在連接線段志堅(jiān)的尖峰
@property(nonatomic) CGFloat flatness;// 個(gè)人理解為繪線的精細(xì)程度蝎困,默認(rèn)為0.6录语,數(shù)值越大,需要處理的時(shí)間越長(zhǎng)
@property(nonatomic) BOOL usesEvenOddFillRule; // 決定是否使用even-odd或者non-zero規(guī)則
path construction
//設(shè)置畫(huà)筆的起始點(diǎn)
- (void)moveToPoint:(CGPoint)point;
//從當(dāng)前點(diǎn)到指定點(diǎn)繪制直線
- (void)addLineToPoint:(CGPoint)point;
//添加貝塞爾曲線
//endPoint終點(diǎn) controlPoint1禾乘、controlPoint2控制點(diǎn)
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
//endPoint終點(diǎn) controlPoint控制點(diǎn)
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
//添加弧線
center弧線圓心坐標(biāo) radius弧線半徑 startAngle弧線起始角度 endAngle弧線結(jié)束角度 clockwise是否順時(shí)針繪制
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
//閉合路徑澎埠,封閉未形成閉環(huán)的路徑
- (void)closePath;
//移除所有的點(diǎn),刪除所有的subPath
- (void)removeAllPoints;
//追加bezierPath路徑
- (void)appendPath:(UIBezierPath *)bezierPath;
// 創(chuàng)建并返回一個(gè)新的反轉(zhuǎn)內(nèi)容的當(dāng)前路徑曲線路徑的對(duì)象始藕。
- (UIBezierPath *)bezierPathByReversingPath
// 用指定的仿射變換矩陣變換路徑的所有點(diǎn)
- (void)applyTransform:(CGAffineTransform)transform;
//填充
- (void)fill;
//路徑繪制
- (void)stroke;
//在這以后的圖形繪制超出當(dāng)前路徑范圍則不可見(jiàn)
- (void)addClip;
4.畫(huà)圖示例代碼
直線圖
// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
// 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 設(shè)置線兩頭樣式
bezierPath.lineCapStyle = kCGLineCapRound;
// 設(shè)置起點(diǎn)蒲稳、終點(diǎn)坐標(biāo)
[bezierPath moveToPoint:CGPointMake(10, 10)];
[bezierPath addLineToPoint:CGPointMake(100, 100)];
// 開(kāi)始繪制
[bezierPath stroke];
矩形圖
// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象,此對(duì)象用于繪制矩形伍派,需要傳入繪制的矩形的Frame
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 50, 50)];
// 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 設(shè)置線兩頭樣式
bezierPath.lineCapStyle = kCGLineCapRound;
// 開(kāi)始繪制
[bezierPath stroke];
圓角矩形
// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象江耀,此對(duì)象用于繪制一個(gè)圓角矩形
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 50, 50)cornerRadius:10];
// 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 開(kāi)始繪制
[bezierPath stroke];
// rect: 需要畫(huà)的矩形的Frame
//corners: 哪些部位需要畫(huà)成圓角
//cornerRadius: 圓角的Size
部分圓角矩形
// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象,此對(duì)象用于繪制一個(gè)部分圓角的矩形诉植,左上祥国、右下
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 50, 50) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(10, 10)];
// 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 開(kāi)始繪制
[bezierPath stroke];
圓
// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象,此對(duì)象用于繪制內(nèi)切圓晾腔,需要傳入繪制內(nèi)切圓的矩形的Frame
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 50, 50)];
// 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 設(shè)置線兩頭樣式
bezierPath.lineCapStyle = kCGLineCapRound;
// 開(kāi)始繪制
[bezierPath stroke];
//center: 圓心坐標(biāo)
//radius: 圓的半徑
//startAngle: 繪制起始點(diǎn)角度
//endAngle: 繪制終點(diǎn)角度
//clockwise: 是否順時(shí)針
圓弧
// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象舌稀,此對(duì)象用于繪制一個(gè)圓弧 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:110 startAngle:0 endAngle:M_PI_2 clockwise:NO]; // 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 開(kāi)始繪制
[bezierPath stroke];
二階曲線
// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
// 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 設(shè)置線兩頭樣式
bezierPath.lineCapStyle = kCGLineCapRound;
// 設(shè)置起點(diǎn)、終點(diǎn)坐標(biāo)
[bezierPath moveToPoint:CGPointMake(100, 100)];
[bezierPath addQuadCurveToPoint:CGPointMake(200, 200) controlPoint:CGPointMake(300, 0)];
// 開(kāi)始繪制
[bezierPath stroke];
三階曲線
// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
// 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 設(shè)置線兩頭樣式
bezierPath.lineCapStyle = kCGLineCapRound;
// 設(shè)置起點(diǎn)灼擂、終點(diǎn)坐標(biāo)
[bezierPath moveToPoint:CGPointMake(100, 100)]; [bezierPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(150, 0) controlPoint2:CGPointMake(150, 300)];
// 開(kāi)始繪制
[bezierPath stroke];
多階曲線
// 設(shè)置線的填充色
[[UIColor redColor] setStroke];
// 新建一個(gè)bezier對(duì)象
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
// 設(shè)置線寬度
bezierPath.lineWidth = 10;
// 設(shè)置線兩頭樣式
bezierPath.lineCapStyle = kCGLineCapRound;
// 設(shè)置起點(diǎn)壁查、終點(diǎn)坐標(biāo)
[bezierPath moveToPoint:CGPointMake(100, 100)]; [bezierPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(150, 0) controlPoint2:CGPointMake(150, 300)];
// 創(chuàng)建第二條貝塞爾曲線
UIBezierPath *bezierPath2 = [UIBezierPath bezierPath]; // 設(shè)置起點(diǎn)、終點(diǎn)坐標(biāo)
[bezierPath2 moveToPoint:CGPointMake(200, 200)]; [bezierPath2 addCurveToPoint:CGPointMake(290, 290) controlPoint1:CGPointMake(250, 0) controlPoint2:CGPointMake(250, 300)];
// 將第二條線剔应,加到第一條線上面去
[bezierPath appendPath:bezierPath2];
// 開(kāi)始繪制
[bezierPath stroke];