深入理解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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。