前言

最近要寫個「會話氣泡」，由于沒有找到合適的背景圖片，所以需要直接用 UIBezierPath 進行繪制。期間用到之前還不太熟悉的繪制圓弧相關知識，于是寫下此文進行記錄。

API 淺析

UIBezierPath 繪制圓弧主要利用以下方法：

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radiusstartAngle:(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 （順時針）
    
  • 如果設置 clockwise 為 NO （逆時針），顯然這是我們需要的結果。
    

最終版參考代碼如下：

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

總結

以上是生活随笔為你收集整理的iOS - 利用 UIBezierPath 绘制圆弧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。