深入理解UIBezierPath畫圓弧addArcWithCenter

UIBezierPath畫圓弧的方法

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);

方法中各參數的意義：

• center 圓心的座標
• radius 圓的半徑
• startAngle 起始的弧度
• endAngle：結束的弧度
• clockwise：YES爲順時針，No爲逆時針

以上五個參數，除了startAngle、endAngle會不清楚怎麼設置，其他都比較容易理解，下面我們針對這兩個參數做一些講解，如果有其他三個參數不太清楚的，可以聯繫我，不過應該沒有吧，= =

如何設置startAngle、endAngle

1.startAngle、endAngle是弧度，不是角度(知道的直接跳到2)

iOS提供以下幾種表示方式：

// 一個半圓的弧度，即180°
#define M_PI        3.14159265358979323846264338327950288   /* pi             */
// 90°
#define M_PI_2      1.57079632679489661923132169163975144   /* pi/2           */
// 45°
#define M_PI_4      0.785398163397448309615660845819875721  /* pi/4           */

用上面提供的宏表示任何度數綽綽有餘，比如表示135°：
0.75 * M_PI
或者1.5 * M_PI_2
....

2.弧度的起點，僅針對這個API

0°

3.弧度的表示

從0°的點開始順時針數算是正方向的角度，用正數表示
從0°的點開始逆時針數算是反方向的角度，用負數表示
所以，在圓上的一個角度，可以同時有兩種表示方法，順時針方向數一種，逆時針方向數一種，講到這裏先別慌，我們現在只要知道怎麼在圓上表示一個弧度就行。

不管怎麼表示，我們只要知道這個弧度在圓的什麼位置上

4.如何設置startAngle、endAngle

舉個栗子，我現在要用UIBezierPath畫一個如下圖所示的圖形：

 

要繪製的圖形

分析步驟如下：
4.1 確定center、radius
4.2 確定弧度的起點、弧度的終點

 

 

弧度的起點、終點

4.3 用弧度表示弧度的起點、弧度的終點
即用startAngle、endAngle表示弧度的起點、弧度的終點
弧度的起點 - startAngle： 0.25 * M_PI 或 -1.75 * M_PI
弧度的終點 - endAngle： 0.5 * M_PI 或 -1.5 * M_PI

 

4.4 確定clockwise，這一步是決定你的弧長怎麼樣的關鍵
如果設爲YES，圓弧會從弧度的起點沿着順時針方向畫弧，遇到弧度的終點停止，結果如下：

順時針

如果設爲NO，圓弧會從弧度的起點沿着逆時針方向畫弧，遇到弧度的終點停止，結果如下：

 

逆時針

所以startAngle、endAngle只是表示出起點和終點，至於線會怎麼畫，決定於clockwise。

下面附上源碼：

 

    CGPoint line_start = CGPointMake(0, 30);
    CGPoint line_end = CGPointMake(100, 30);
    CGPoint circle_center = CGPointMake(85, 15);
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:line_start];
    [path addLineToPoint:line_end];
    
    // 注意線畫到這裏其實只畫了一條直線，但是調用addArcWithCenter方法路徑會自動連線到圓弧的起點
    [path addArcWithCenter:circle_center radius:10 startAngle:0.25 * M_PI endAngle:- 1.5 * M_PI clockwise:NO];
    
    CAShapeLayer *shapeLayer=[CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充顏色
    shapeLayer.strokeColor = [UIColor blackColor].CGColor;//邊框顏色
    shapeLayer.lineCap = @"round";
    [self.layer addSublayer:shapeLayer];

效果如下：

IMG_3129.PNG

總結

<p>

花了一上午才寫完，不知道寫的清不清楚，希望對你能有幫助，另外記得順手點贊~

致謝

http://www.bubuko.com/infodetail-1031393.html

作者：才寒
鏈接：https://www.jianshu.com/p/5e96e754d9cb
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。