iOS之貝塞爾路徑UIBezierPath

1. UIBezierPath類的介紹

UIBezierPath主要用來繪制矢量圖形，它是基于Core Graphics對CGPathRef數據類型和path繪圖屬性的一個封裝，所以是需要圖形上下文的CGContextRef，所以一般UIBezierPath在drawRect中使用。

2.UIBezierPath 的常用屬性

@property(nonatomic) CGPathRef CGPath;  //UIBezierPath類轉換成CGPath

@property(nonatomic,readonly) CGPoint currentPoint;  //當前path的位置，可以理解為path的終點

@property(nonatomic) CGFloat lineWidth;   //path寬度

//kCGLineCapButt,     // 無端點      
//kCGLineCapRound,    // 圓形端點  
//kCGLineCapSquare    // 方形端點
@property(nonatomic) CGLineCap lineCapStyle;

//kCGLineJoinMiter,    // 尖角
//kCGLineJoinRound,    // 圓角
//kCGLineJoinBevel     // 缺角
@property(nonatomic) CGLineJoin lineJoinStyle;

//最大斜接長度（只有在使用kCGLineJoinMiter是才有效）， 邊角的角度越小，斜接長度就會越大，為了避免斜接長度過長，使用lineLimit屬性限制，如果斜接長度超過miterLimit，邊角就會以KCALineJoinBevel類型來顯示
@property(nonatomic) CGFloat miterLimit;

3.UIBezierPath的類方法

//僅僅初始化,需要添加路徑。
+ (instancetype)bezierPath;

//矩形的路徑。
+ (instancetype)bezierPathWithRect:(CGRect)rect;

//獲得圓形或橢圓的路徑。
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

// 獲得圓角矩形路徑，四周均圓角 。
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
 
//獲得圓角矩形路徑，是某些角圓角，UIRectCorner是枚舉類型
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;

//獲得圓弧路徑,參數依次是圓心，半徑，起始角度，結束角度，是否順時針（yes是順時針，no是逆時針）
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;

//用一條CGPath初始化另一條path。
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

4. 為UIBezierPath對象添加路徑

//UIBezierPath對象的起始點
- (void)moveToPoint:(CGPoint)point;

//從path的最后一點開始繪制一條線到目標點 
- (void)addLineToPoint:(CGPoint)point;

// 添加一條三次貝塞爾曲線 
- (void)addCurveToPoint:(CGPoint)endPoint
          controlPoint1:(CGPoint)controlPoint1
          controlPoint2:(CGPoint)controlPoint2;

//添加一條二次貝塞爾曲線 
 - (void)addQuadCurveToPoint:(CGPoint)endPoint
                controlPoint:(CGPoint)controlPoint;

// 添加一條圓弧
- (void)addArcWithCenter:(CGPoint)center 
                  radius:(CGFloat)radius 
              startAngle:(CGFloat)startAngle 
                endAngle:(CGFloat)endAngle
               clockwise:(BOOL)clockwise ;

/** 為path添加虛線，pattern數組存放各段虛線的長度，count是數組元素數量，phase是起始位置 */
- (void)setLineDash:(nullable const CGFloat *)pattern 
              count:(NSInteger)count
              phase:(CGFloat)phase;

5. UIBezierPath的使用

  • 直線

- (void)drawRect:(CGRect)rect {
    
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointZero];
    [path addLineToPoint:CGPointMake(100, 100)];
    path.lineWidth = 10;
    [[UIColor redColor] setStroke];
    path.lineJoinStyle = kCGLineJoinRound;
    [path stroke];
    

}
0.png
  • 三角形
- (void)drawRect:(CGRect)rect {
    
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 10)];
    [path addLineToPoint:CGPointMake(100, 100)];
    [path addLineToPoint:CGPointMake(150, 30)];
    // [path addLineToPoint:CGPointMake(10, 10)];
    [path closePath];
    
    path.lineWidth = 10;
    [[UIColor redColor] setStroke];
    
    path.lineJoinStyle = kCGLineJoinRound;
    [path stroke];
    

}
BB970ACE-C3E1-4090-B7AA-B0A439DD619B.png
  • 矩形
- (void)drawRect:(CGRect)rect {
    
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(30, 30, 100, 50)];
    path.lineWidth = 3;
    [path stroke];
}
5E2C8EE6-7C5C-47BA-88B2-58F963CBB749.png
  • 橢圓
- (void)drawRect:(CGRect)rect {
   
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 100, 50)];
    path.lineWidth = 3;
    [path stroke];
  
}
0DBA2E10-0657-4F71-B57F-5F88B74413C7.png
  • 圓
- (void)drawRect:(CGRect)rect {
   
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 100, 100)];
    path.lineWidth = 3;
    [path stroke];
  
}
63600FF0-E7F3-4B32-B262-FAD70ADAAC59.png
  • 帶有圓角的矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 50, 50) cornerRadius:5.0f];
path.lineWidth = 5.0f;
[path stroke];
3440AE1C-3680-4F6E-A052-79EF642D1F3C.png
  • 特定的角為圓角的矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 50, 50) byRoundingCorners:UIRectCornerBottomRight cornerRadii:CGSizeMake(5,5)];
    
    path.lineWidth = 3.0f;
    
    [path closePath];
    
    [path stroke];
D14185F3-1592-4817-A86F-04E93F816B9D.png
  • 圓弧
  UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:25 startAngle:0 endAngle:M_PI clockwise:YES];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
E3BD176C-42D0-4CE0-B7AE-3826F20AE1B4.png
  • 通過路徑A創建路徑B
   UIBezierPath *path_A = [UIBezierPath bezierPath];
    
    [path_A moveToPoint:CGPointMake(50, 50)];
    
    [path_A addLineToPoint:CGPointMake(100, 100)];
    
    UIBezierPath *path_B = [UIBezierPath bezierPathWithCGPath:path_A.CGPath];
    
     path_B.lineWidth = 30.0f;
    [[UIColor redColor] setStroke];
    [path_B stroke];
8F5B11AC-EB99-45F2-8F07-FA89EE38DD06.png
  • 三次貝塞爾曲線
   UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(0, 100)];
    
    [path addCurveToPoint:CGPointMake(200, 100) controlPoint1:CGPointMake(50, 150) controlPoint2:CGPointMake(150, 50)];
    
    [[UIColor greenColor] setStroke];
    
    path.lineWidth = 5;
    
    [path stroke];
FB0E6D26-64C0-4C39-92B2-25D07120A5FA.png
  • 二次貝塞爾曲線
   UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(0, 100)];
    
    [path addQuadCurveToPoint:CGPointMake(200, 100) controlPoint:CGPointMake(100, 0)];
    
    [[UIColor yellowColor] setStroke];
    
    path.lineWidth = 5;
    
    [path stroke];
AC6E51B6-BE16-4199-A1E8-FACF7D73FA5A.png
  • 圓弧
  UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(100, 100)];
    
    [path addArcWithCenter:CGPointMake(100, 100) radius:70 startAngle:0 endAngle:M_PI_2 clockwise:YES];
    
    [[UIColor yellowColor] setFill];
    
    path.lineWidth = 5;
    
    [path fill];
BEE657C0-2765-4EDD-8085-87314D2141B9.png
  • 追加路徑
   UIBezierPath *path_A = [UIBezierPath bezierPath];
    
    [path_A moveToPoint:CGPointMake(0, 0)];
    [path_A addLineToPoint:CGPointMake(100, 100)];
    
    UIBezierPath *path_B = [UIBezierPath bezierPath];
    
    [path_B moveToPoint:CGPointMake(110, 130)];
    [path_B addLineToPoint:CGPointMake(150, 150)];
    
    [path_A appendPath:path_B];
    
    [path_A stroke];
F034CACC-E709-4E55-A616-4A451740B63F.png
  • 創建翻轉路徑，即起點變成終點，終點變成起點
   UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(0, 50)];
    [path addLineToPoint:CGPointMake(50, 50)];
    path.lineWidth = 5.0f;
    
    //UIBezierPath[9922:403506] {50, 50}
     NSLog(@"%@",NSStringFromCGPoint(path.currentPoint));
    
    
    //起點變成終點，終點變成起點
    UIBezierPath *path_b = [path bezierPathByReversingPath];
    
    //UIBezierPath[9922:403506] {0, 50}
     NSLog(@"%@",NSStringFromCGPoint(path_b.currentPoint));
    CGAffineTransform transform = CGAffineTransformMakeTranslation(150, 0);
    // 向右平移150
    [path_b applyTransform: transform];
    //UIBezierPath[9943:404532] {150, 50}
    NSLog(@"%@",NSStringFromCGPoint(path_b.currentPoint));
    path_b.lineWidth = 5.0f;
    
    
    
    [path addLineToPoint:CGPointMake(100, 100)];
    [path_b addLineToPoint:CGPointMake(100, 100)];
    
   
    [[UIColor yellowColor] set];
    [path stroke];
    [[UIColor greenColor] set];
    [path_b stroke];
B1C86127-D6F4-4D42-A3CB-14BA65666764.png
  • 路徑進行仿射變換
UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(100, 100)];
    [[UIColor redColor] setStroke];
    path.lineWidth = 5.0f;
    
    [path stroke];
    
    UIBezierPath *pathb = [UIBezierPath bezierPathWithCGPath:path.CGPath];
    
    CGAffineTransform transform =  CGAffineTransformRotate(self.transform, M_PI/20);
    [pathb applyTransform:transform];
    
    [[UIColor greenColor] setStroke];
    pathb.lineWidth = 5.0f;
    
    [pathb stroke];
162637BF-623A-4ECA-9BA1-A21D7780FDDE.png
  • 虛線
 CGFloat dashStyle[] = {20.0f, 3.0f ,5.0f};
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(170, 50)];
    
    [path setLineDash:dashStyle count:3 phase:0.0];
    
    [[UIColor greenColor] setStroke];
    
    path.lineWidth = 10;
    
    [path stroke];
54039348-2B24-4B94-8C7A-836B558295F0.png
  • 設置當前圖形上下文的繪圖區域可見,隨后的繪圖只能在上面的path里才可以看到。
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
    
    [[UIColor greenColor] setStroke];
    
    //只有在path里才能看見，其他的切了。
    [path addClip];
    
    [path stroke];
    
    UIBezierPath *path1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 80, 80)];
    
    [[UIColor greenColor] setStroke];
    
    [[UIColor redColor] setFill];
    
    path1.lineWidth = 10;
    
    [path1 stroke];
    [path1 fill];
74E064FF-C004-4755-9D5A-B3D07EF6C474.png
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容