前言

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

API 淺析

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

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radiusstartAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise

方法中各參數(shù)含義：

• center：圓心
• radius：半徑
• startAngle：開始弧度
• endAngle：結(jié)束弧度
• clockwise：繪制方向，YES 為順時(shí)針，NO 為逆時(shí)針

相關(guān)參數(shù)的含義可以參考下圖：

其實(shí)這還是比較容易理解的，要想一段圓弧，就得確定圓上的兩點(diǎn)，然后選擇某個(gè)方向（順時(shí)針或逆時(shí)針）來連接兩點(diǎn)。而確定圓上的點(diǎn)，可以通過確定圓心、半徑和角度（或弧度）來實(shí)現(xiàn)。

看到這里，你大概理解理解這個(gè) API 的使用了，但是 startAngle，endAngle 的傳值是弧度，如果你不理解弧度的表示的話，可能你還是無法使用。

弧度的表示

弧度的表示其實(shí)在高中已經(jīng)學(xué)過了，這里就簡單復(fù)習(xí)一下。

其實(shí)圓上的一個(gè)弧度有兩種表示方法，順時(shí)針（正方向）一種，逆時(shí)針（負(fù)方向）一種。可以參考下文圖示以及文字描述：

• 從0 PI 的點(diǎn)開始順時(shí)針數(shù)算是正方向的弧度，用正數(shù)表示
• 從0 PI 的點(diǎn)開始逆時(shí)針數(shù)算是反方向的弧度，用負(fù)數(shù)表示

注：PI 表示 $\pi$

下面這些系統(tǒng)提供的宏，能幫助我們方便的表示圓上任意點(diǎn)的弧度。

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

實(shí)戰(zhàn)演練

我們要利用 UIBezierPath 繪制如下圖形。

我們將重點(diǎn)放在后面的圓弧繪制部分。可以按照如下步驟：

• 確定圓心 center
• 確定半徑 radius
• 確定起點(diǎn)和終點(diǎn) startAngle，endAngle
  
  我們可以有如下設(shè)置
  • startAngle 為 M_PI 或 -M_PI
  • endAngle 為 1.5 * M_PI 或 -0.5 * M_PI
• 確定繪制方向 clockwise
  • 如果設(shè)置 clockwise 為 YES （順時(shí)針）
    
  • 如果設(shè)置 clockwise 為 NO （逆時(shí)針），顯然這是我們需要的結(jié)果。
    

最終版參考代碼如下：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。