UIBezierPath

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];
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章