UIBezierPath貝塞爾路徑
1.BezierPath可以根據路徑在視圖中進行渲染,經常用來進行曲線繪製,所以又稱貝塞爾曲線。BezierPath和CAShapeLayer組合使用可以做一些比較炫酷的動畫效果。
2.相關API
1).常用方法
+(instancetype)bezierPath;
+(instancetype)bezierPathWithRect:(CGRect)rect; //矩形
+(instancetype)bezierPathWithOvallnRect:(CGRect)rect //橢圓或內切圓
+(instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corner cornerRadii:(CGSize)cornerRadii
;繪製一個圓角矩形,通過UIRectCorner選擇圓弧的位置,cornerRadii爲圓弧的大小
(UIRectCorner)corner枚舉 值
/ UIRectCornerTopLeft =1<<0, //矩形左上角
UIRectCornerTopRight =1<<1, //矩形右上角
UIRectCornerBottomLeft =1<<2, //矩形左下角
UIRectCornerBottomRight =1<<3, //矩形右下角
UIRectCornerAllCorners = ~0UL //矩形四個角都包括/
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
繪製一個圓弧路徑。ArcCenter:圓弧圓心位置;radius:圓弧半徑;startAngle:開始的弧度(角度);endAngle:結束的弧度(角度);clockwise:是否爲順時針。
路徑函數
-(void)moveToPoint:(CGPoint)point; 設置初始點
-(void)addLineToPoint:(CGPoint)point; 增加直線
//添加圓弧
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
二階塞貝尓曲線 以endPoint爲終點,以controlPoint爲控制點,繪製二階貝塞爾曲線。
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
三階塞貝尓曲線 以endPoint爲終點,以controlPoint1、controlPoint2兩個點爲控制點,繪製貝塞爾曲線。
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
閉合起點和終點 在起點和終點添加一條直線。
-(void)closePath;
//移除路徑中所有的點
- (void)removeAllPoints;
//路徑拼接
- (void)appendPath:(UIBezierPath *)bezierPath;
//添加虛線
- (void)setLineDash:(nullableconstCGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase; 設置線型 可設置成虛線
注:pattern 線段數組 如:CGFloat dash[] = {1,1}; 代表實線和空白交替的長度 及先繪製1個長度再空1個,再繪製一個.....;
//檢索線型
- (void)getLineDash:(nullableCGFloat *)pattern count:(nullableNSInteger *)count phase:(nullableCGFloat *)phase;檢索線型。
//去繪製路徑
-(void)stroke 利用當前繪畫屬性沿着路徑畫線
路徑的畫線顏色。
[[UIColor orangeColor] setStroke];
填充繪製區域的顏色
-(void)setFill
[uicolor orangeColor] setFill];
- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
利用指定模式填充路徑封閉範圍, 該方法在繪畫之前會自動將開放子路徑封閉, 填充部分不包含路徑本身, 所以對於線寬較大的路徑, 填充部分會跟部分路徑重合。
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;利用指定模式沿着路徑畫線。
2).常用屬性
CGPathRef CGPath 路徑
BOOL empty 路徑信息是否爲空,
CGRect bounds 可以封閉所有路徑點的最小矩形範圍, 包括多次貝塞爾曲線的控制點在內。
CGPoint currentPoint; 畫筆當前的位置
-(BOOL)containsPoint:(CGPoint)point 是否包含指定點
CGFloat lineWidth 線寬
CGFloat miterLimit 最大斜長度,只有lineJoin屬性爲kCGLineJoinMiter有效 最大斜長度,就是上圖中拐角處外面尖角和內部尖角的距離
BOOL usesEvenOddFillRule; YES交互處不繪製,NO繪製默認
CGLineCap lineCapStyle 路徑的終點形狀,該屬性適用於起點和終點
/lineCapStyle值
kCGLineCapButt, //方形結束, 結束位置正好爲精確位置。——默認值
kCGLineCapRound, //圓形結束, 結束位置超過精確位置半個線寬。
kCGLineCapSquare //方形結束, 結束位置超過精確位置半個線寬。
/
CGLineJoin lineJoinStyle 路徑的交叉點(拐角)的形狀
/lineJoinStyle值
kCGLineJoinMiter, //全部連接(尖角)。——默認值
kCGLineJoinRound, //圓形連接。(圓角)
kCGLineJoinBevel //斜角連接。(切角)
/
CGFloat flatness 確定彎曲路徑短的繪製精度的因素
count數組長度 count值小於數組實際長度時,方法就會對相應長度的數組元素進行循環,而大於的時候 會有警告,沒有效果;
phase 循環數組時跳過的長度,如pattern爲{2,6},phase爲1,則第一個元素畫1的時候就跳過直接畫6
demo
1.矩形
[[UIColor redColor] setFill]; //填充繪製區域顏色
[[UIColor greenColor] setStroke]; //路徑顏色
//矩形
UIBezierPath *RectPath = [UIBezierPath bezierPathWithRect:CGRectMake(120,0, 100, 60)];
//線寬
RectPath.lineWidth = 2;
//進行繪製
[RectPath stroke];
//進行填充
[RectPath fill];
2.橢圓
[[UIColor redColor] setFill]; //填充繪製區域顏色
[[UIColor greenColor] setStroke]; //路徑顏色
//橢圓 矩形+圓角25是圓的角度
UIBezierPath *roundedPath =[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0,0,100,60) cornerRadius:25];
roundedPath.lineWidth = 4;
[roundedPath stroke];
[roundedPath fill];
3.正方形
[[UIColor redColor] setFill]; //填充繪製區域顏色
[[UIColor greenColor] setStroke]; //路徑顏色
//正方形
UIBezierPath *squarePath = [UIBezierPath bezierPathWithRect:CGRectMake(230,0, 60, 60)];
squarePath.lineWidth = 2;
[squarePath stroke];
[squarePath fill];
4.圓
//圓
[[UIColor redColor] setFill]; //填充繪製區域顏色
[[UIColor greenColor] setStroke]; //路徑顏色
UIBezierPath *ovalinPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(300, 0,90, 60)];
ovalinPath.lineWidth = 2;
[ovalinPath stroke];
[ovalinPath fill];
5.左上右下圓角
[[UIColor redColor] setFill]; //填充繪製區域顏色
[[UIColor greenColor] setStroke]; //路徑顏色
//左上右下圓角
UIBezierPath *bezierPath2 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(80, 80, 100, 100) byRoundingCorners:UIRectCornerTopLeft|UIRectCornerBottomRight cornerRadii:CGSizeMake(40, 0)];
bezierPath2.lineWidth = 4;
[bezierPath2 stroke];
[bezierPath2 fill];
5.右上左下圓角
//右上左下圓角
UIBezierPath *bezierPath3 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(200, 80, 100, 100) byRoundingCorners:UIRectCornerTopRight|UIRectCornerBottomLeft cornerRadii:CGSizeMake(40, 0)];
bezierPath3.lineWidth = 4;
[bezierPath3 stroke];
[bezierPath3 fill];
6.圓弧
[[UIColor redColor] setFill]; //填充繪製區域顏色
[[UIColor greenColor] setStroke]; //路徑顏色
參數1:圓弧中心點(x,y),參數2:圓弧半徑(控制圓弧大小),參數3:開始的弧度 12點鐘方向3pi/2,3點鐘方向0.2pi/2 6點鐘方向pi/2 9點鐘方向 pi . 參數4:結束的弧度 參數5:YES順時針/NO逆時針
UIBezierPath *bezierPaht4 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(360, 150) radius:40 startAngle:M_PI endAngle:M_PI_4 clockwise:YES];
bezierPaht4.lineWidth = 4;
[bezierPaht4 stroke];
7扇形
//扇形
[[UIColor purpleColor] setStroke];
[[UIColor orangeColor] setFill];
UIBezierPath *bezierPath5 = [UIBezierPath bezierPath];
[bezierPath5 moveToPoint:CGPointMake(30,250)];
[bezierPath5 addArcWithCenter:CGPointMake(30, 250) radius:50 startAngle:-M_PI*2/3.f endAngle:-M_PI_4 clockwise:YES];
bezierPath5.lineWidth = 4;
[bezierPath5 stroke];
[bezierPath5 fill];
[bezierPath5 closePath];
8.二階貝塞爾曲線
[[UIColor whiteColor] setStroke];
UIBezierPath *twoPath = [UIBezierPath bezierPath];
//起點
[twoPath moveToPoint:CGPointMake(200,160)];
//CurveToPoint:終點 , controlpoint:控制點
[twoPath addQuadCurveToPoint:CGPointMake(100, 250) controlPoint:CGPointMake(250, 300)];
twoPath.lineWidth = 4;
[twoPath stroke];
9.三階貝塞爾曲線
//三階曲線
UIBezierPath *trePath = [UIBezierPath bezierPath];
//起點
[trePath moveToPoint:CGPointMake(260, 260)];
//終點 controlPoint1。2兩個控制點
[trePath addCurveToPoint:CGPointMake(360, 260) controlPoint1:CGPointMake(285, 150) controlPoint2:CGPointMake(335, 310)];
10.交匯點是否繪製
//交匯圓
UIBezierPath *yPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 330, 80, 80)];
[yPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(90, 330, 50, 50)]];
//交匯處不繪製
yPath.usesEvenOddFillRule = YES;
yPath.lineWidth = 5;
[yPath stroke];
[yPath fill];