前言

最近要写个「会话气泡」，由于没有找到合适的背景图片，所以需要直接用 UIBezierPath 进行绘制。期间用到之前还不太熟悉的绘制圆弧相关知识，于是写下此文进行记录。

API 浅析

UIBezierPath 绘制圆弧主要利用以下方法：

- (void)addArcWithCenter:(CGPoint)center 
				  radius:(CGFloat)radius
			  startAngle:(CGFloat)startAngle 
			    endAngle:(CGFloat)endAngle 
			   clockwise:(BOOL)clockwise
复制代码

方法中各参数含义：

center：圆心
radius：半径
startAngle：开始弧度
endAngle：结束弧度
clockwise：绘制方向，YES 为顺时针，NO 为逆时针

相关参数的含义可以参考下图：
在这里插入图片描述

其实这还是比较容易理解的，要想一段圆弧，就得确定圆上的两点，然后选择某个方向（顺时针或逆时针）来连接两

点。而确定圆上的点，可以通过确定圆心、半径和角度（或弧度）来实现。

看到这里，你大概理解理解这个 API 的使用了，但是 startAngle，endAngle 的传值是弧度，如果你不理解弧度的表

示的话，可能你还是无法使用。

弧度的表示

弧度的表示其实在高中已经学过了，这里就简单复习一下。

其实圆上的一个弧度有两种表示方法，顺时针（正方向）一种，逆时针（负方向）一种。可以参考下文图示以及文字描述：

从0 PI 的点开始顺时针数算是正方向的弧度，用正数表示
从0 PI 的点开始逆时针数算是反方向的弧度，用负数表示

注：PI 表示 π \piπ
在这里插入图片描述

下面这些系统提供的宏，能帮助我们方便的表示圆上任意点的弧度。

#define M_PI        3.14159265358979323846264338327950288   /* pi             */
#define M_PI_2      1.57079632679489661923132169163975144   /* pi/2           */
#define M_PI_4      0.785398163397448309615660845819875721  /* pi/4           */
复制代码

实战演练

我们要利用 UIBezierPath 绘制如下图形。
在这里插入图片描述

我们将重点放在后面的圆弧绘制部分。可以按照如下步骤：

确定圆心 center
确定半径 radius
确定起点和终点 startAngle，endAngle

在这里插入图片描述

我们可以有如下设置
- startAngle 为 M_PI 或 -M_PI
- endAngle 为 1.5 * M_PI 或 -0.5 * M_PI
确定绘制方向 clockwise
如果设置 clockwise 为 YES （顺时针）

在这里插入图片描述

最终版参考代码如下：

CGFloat radius = 40;
CGPoint startPoint = CGPointMake(50, 200);
CGPoint endPoint = CGPointMake(150, 200);
CGPoint centerPoint = CGPointMake(150 + radius, 200);

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPoint];
[path addLineToPoint:endPoint];
[path addArcWithCenter:centerPoint radius:radius startAngle:M_PI endAngle:1.5 * M_PI clockwise:NO];

CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor blueColor].CGColor;

[self.view.layer addSublayer:layer];
复制代码