iOS - 利用 UIBezierPath 绘制圆弧

3,635 阅读3分钟

前言

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

资料收录

由于文章篇幅有限,只能点到即止地介绍当前一些工作成果和思考,如果你对 iOS 底层原理、架构设计、构建系统、如何面试有兴趣了解,你也可以关注我及时获取最新资料以及面试相关资料。如果你有什么意见和建议欢迎给我留言!

写的不好的地方欢迎大家指出,希望大家多留言讨论,让我们共同进步!

喜欢iOS的小伙伴可以关注我,一起学习交流!!!

链接:blog.csdn.net/weixin\_422…