iOS - 利用 UIBezierPath 绘制圆弧

灰太狼 2022-10-29 13:22 407阅读 0赞

# 前言 #

最近要写个「会话气泡」，由于没有找到合适的背景图片，所以需要直接用 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 为逆时针

相关参数的含义可以参考下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI5MjIyOQ_size_16_color_FFFFFF_t_70]  
其实这还是比较容易理解的，**要想一段圆弧，就得确定圆上的两点，然后选择某个方向（顺时针或逆时针）来连接两点**。而确定圆上的点，可以**通过确定圆心、半径和角度（或弧度）来实现**。

看到这里，你大概理解理解这个 API 的使用了，但是 startAngle，endAngle 的传值是弧度，如果你不理解弧度的表示的话，可能你还是无法使用。

# 弧度的表示 #

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

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

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

注：PI 表示  π \\pi π  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI5MjIyOQ_size_16_color_FFFFFF_t_70 1]

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

#define M_PI 3.14159265358979323846264338327950288 /* pi */
    #define M_PI_2 1.57079632679489661923132169163975144 /* pi/2 */
    #define M_PI_4 0.785398163397448309615660845819875721 /* pi/4 */

# 实战演练 #

我们要利用 UIBezierPath 绘制如下图形。  
![在这里插入图片描述][20210221115520169.png]  
我们将重点放在后面的圆弧绘制部分。可以按照如下步骤：

*  确定圆心 center
 *  确定半径 radius
 *  确定起点和终点 startAngle，endAngle  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI5MjIyOQ_size_16_color_FFFFFF_t_70 2]  
    我们可以有如下设置
    
     *  startAngle 为 `M_PI` 或 `-M_PI`
     *  endAngle 为 `1.5 * M_PI` 或 `-0.5 * M_PI`
 *  确定绘制方向 clockwise
    
     *  如果设置 clockwise 为 `YES` （顺时针）  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI5MjIyOQ_size_16_color_FFFFFF_t_70 3]
     *  如果设置 clockwise 为 `NO` （逆时针），显然这是我们需要的结果。  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI5MjIyOQ_size_16_color_FFFFFF_t_70 4]

最终版参考代码如下：

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];

# 参考链接 #

*  [https://www.jianshu.com/p/5e96e754d9cb][https_www.jianshu.com_p_5e96e754d9cb]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI5MjIyOQ_size_16_color_FFFFFF_t_70]: /images/20221024/8236fa0db0eb49b3af4184c53630ad6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI5MjIyOQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/e3043250c69243a2918ad57ab14b058b.png
[20210221115520169.png]: /images/20221024/30eb4f8d6ff84e62811b60422127222e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI5MjIyOQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/68915da58f724634a714275a5e7c1515.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI5MjIyOQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/6537cdd10f624d6189b91de1f5e51fb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI5MjIyOQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/7a47a8ad0e8c443585cf5db2ec440fb8.png
[https_www.jianshu.com_p_5e96e754d9cb]: https://www.jianshu.com/p/5e96e754d9cb