使用UIBezierPath類可以創(chuàng)建基于矢量的路徑患膛,這個類在UIKit中。此類是Core Graphics框架關(guān)于path的一個封裝耻蛇。
UIBezierPath對象是CGPathRef數(shù)據(jù)類型的封裝踪蹬。path如果是基于矢量形狀的,都用直線和曲線段去創(chuàng)建臣咖。我們使用直線段去創(chuàng)建矩形和多邊形跃捣,使用曲線段去創(chuàng)建弧(arc)夺蛇,圓或者其他復(fù)雜的曲線形狀疚漆。每一段都包括一個或者多個點,繪圖命令定義如何去詮釋這些點刁赦。每一個直線段或者曲線段的結(jié)束的地方是下一個的開始的地方娶聘。每一個連接的直線或者曲線段的集合成為subpath。一個UIBezierPath對象定義一個完整的路徑包括一個或者多個subpaths甚脉。
使用UIBezierPath畫圖步驟:
0丸升、 重寫View的drawRect方法
1、創(chuàng)建一個UIBezierPath
對象
2牺氨、調(diào)用-moveToPoint
設(shè)置初始線段的起點
3狡耻、添加線或曲線去定義一個或者多個子路徑
4墩剖、改變UIBezierPath
對象跟繪圖相關(guān)的屬性(畫筆顏色,填充樣式等)
0x01 對象創(chuàng)建
//該方法使用較多(自定義樣式方便)
+ (instancetype)bezierPath;
//根據(jù)一個矩形畫貝塞爾曲線
+ (instancetype)bezierPathWithRect:(CGRect)rect;
//根據(jù)一個矩形畫內(nèi)切曲線
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
//根據(jù)一個矩形畫內(nèi)切曲線夷狰。通常用它來畫圓或者橢圓
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
第一個工廠方法是畫矩形涛碑,但是這個矩形是可以畫圓角的。第一個參數(shù)是矩形孵淘,第二個參數(shù)是圓角大小蒲障。
第二個工廠方法功能是一樣的,但是可以指定某一個角畫成圓角瘫证。像這種我們就可以很容易地給UIView擴展添加圓角的方法了揉阎。
//畫圓弧
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
center: 弧線中心點的坐標(biāo)
radius: 弧線所在圓的半徑
startAngle: 弧線開始的角度值
endAngle: 弧線結(jié)束的角度值
clockwise: 是否順時針畫弧線
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
0x02簡單圖形繪制
/**
畫矩形
*/
- (void)drawShape {
//創(chuàng)建對象(也可以直接用矩形繪制)
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
//路徑
[bezierPath moveToPoint:CGPointMake(20, 400)];
[bezierPath addLineToPoint:CGPointMake(20, 440)];
[bezierPath addLineToPoint:CGPointMake(80, 440)];
[bezierPath addLineToPoint:CGPointMake(80, 400)];
//閉合(可選擇路徑閉合 也可選擇添加第一個點)
[bezierPath closePath];
//線寬
bezierPath.lineWidth = 1.5f;
//線條拐角處理
//kCGLineCapButt,
//kCGLineCapRound,
//kCGLineCapSquare
bezierPath.lineCapStyle = kCGLineCapRound;
//終點處理
//kCGLineJoinMiter, 斜接
//kCGLineJoinRound, 圓滑銜接
//kCGLineJoinBevel 邪教連接
bezierPath.lineJoinStyle = kCGLineJoinRound;
/////////////////////設(shè)置當(dāng)填充顏色和畫筆顏色同時存在時,要先設(shè)置畫筆顏色/////////////////////
// 設(shè)置填充顏色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[bezierPath fill];
//畫筆顏色設(shè)置
UIColor *strokeColor = [UIColor blueColor];
[strokeColor setStroke];
//根據(jù)坐標(biāo)點連線
[bezierPath stroke];
//顏色填充
// [bezierPath fill];
}
/**
畫圓弧
*/
- (void)drawARC {
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.center.x, self.center.y) radius:40.f startAngle:kDEGREES_TO_RADIANS(0) endAngle:kDEGREES_TO_RADIANS(270) clockwise:YES];
bezierPath.lineWidth = 4.f;
UIColor *strokeColor = [UIColor greenColor];
[strokeColor setStroke];
[bezierPath stroke];
}
畫弧參數(shù)startAngle和endAngle使用的是弧度背捌,而不是角度毙籽,因此我們需要將常用的角度轉(zhuǎn)換成弧度。毡庆。如果設(shè)置的clockwise:YES是順時針方向繪制坑赡。
/**
畫二次貝塞爾曲線
*/
- (void)drawSecondBezierPath {
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint:CGPointMake(20, 40)];
[bezierPath addQuadCurveToPoint:CGPointMake(200, 300) controlPoint:CGPointMake(100, 200)];
bezierPath.lineWidth = 10.f;
UIColor *strokeColor = [UIColor purpleColor];
[strokeColor setStroke];
[bezierPath stroke];
}
endPoint:終端點
controlPoint:控制點,對于二次貝塞爾曲線么抗,只有一個控制點
/**
三次貝塞爾曲線
*/
- (void)drawThirdBezierPath {
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
// 設(shè)置起始端點
[bezierPath moveToPoint:CGPointMake(20, 150)];
[bezierPath addCurveToPoint:CGPointMake(300, 150)
controlPoint1:CGPointMake(160, 0)
controlPoint2:CGPointMake(160, 250)];
bezierPath.lineCapStyle = kCGLineCapRound;
bezierPath.lineJoinStyle = kCGLineJoinRound;
bezierPath.lineWidth = 5.0;
UIColor *strokeColor = [UIColor redColor];
[strokeColor setStroke];
[bezierPath stroke];
}
組成是起始端點+控制點1+控制點2+終止端點