> For the complete documentation index, see [llms.txt](https://jacky-chen.gitbook.io/jackychen/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jacky-chen.gitbook.io/jackychen/user-interface/ios-shi-yong-bei-sai-er-qu-xian-hui-zhi-lu-jing.md).

# iOS 使用貝塞爾曲線繪製路徑

## 教學連結

* [**使用貝賽爾曲線繪製路徑**](https://hk.saowen.com/a/271cb8c754ecfbdb893177cd004d683f4d408a55f30209e537dbe7927af08466)

## 範例

* 繪製一段圓弧 如果是合起來的就是圓了

  ```swift
  let criclePath: UIBezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: 200, y: 100), radius: 50, startAngle: 0, endAngle: 5.12, clockwise: true)
  criclePath.stroke()
  ```
* 繪製一個矩形

  ```swift
  let rectPath: UIBezierPath = UIBezierPath.init(rect: CGRect.init(x: 100, y: 160, width: 50, height: 50))
  criclePath.append(rectPath)
  ```
* 繪製一個橢圓 原理是內接矩形，如果矩形的長寬相等那幺繪製的就是圓

  ```swift
  let ovalPath:UIBezierPath = UIBezierPath.init(ovalIn: CGRect.init(x: 200, y: 200, width: 100, height: 60))
  criclePath.append(ovalPath)
  ```
* 繪製直線多邊形 可以讓多條直線拼接 組合成複雜的形狀 比如繪製一個三角形

  ```swift
  let trianglePath :UIBezierPath = UIBezierPath.init()
  trianglePath.move(to: CGPoint.init(x: 100, y: 300))  //繪製起始點
  trianglePath.addLine(to: CGPoint.init(x: 100, y: 400))  //從起點繪製一條直線到指定點
  trianglePath.addLine(to: CGPoint.init(x: 250, y: 350))  //
  trianglePath.close()   //閉合路徑
  trianglePath.lineWidth = 3.0
  criclePath.append(trianglePath)
  ```
* 添加一個二階的曲線 二階曲線一共是三個點， 起點／終點／折點（控制點）

  ```swift
  let cruvePath :UIBezierPath = UIBezierPath.init()
  cruvePath.move(to: CGPoint.init(x: 50, y: 420))
  cruvePath.addQuadCurve(to: CGPoint.init(x: 250, y: 420), controlPoint: CGPoint.init(x: 100, y: 530))
  criclePath.append(cruvePath)
  ```
* 添加一個三階的曲線 起點 終點 兩個控制點 後面可以無限添加 二階曲線 形成一個很長的三階曲線

  ```swift
  let path :UIBezierPath = UIBezierPath.init()
  path.move(to: CGPoint.init(x: 50, y: 550))
  path.addCurve(to: CGPoint.init(x: 287, y: 550), controlPoint1: CGPoint.init(x: 150, y: 720), controlPoint2: CGPoint.init(x: 215, y: 410))
  path.addQuadCurve(to: CGPoint.init(x: 350, y: 550), controlPoint: CGPoint.init(x: 324, y: 610))
  criclePath.append(path)
  ```
* 創建一個CAShapelayer 用於顯示這些路徑

  ```swift
  let shPl: CAShapeLayer = CAShapeLayer.init()
  shPl.path = criclePath.cgPath
  shPl.lineWidth = 3.0
  shPl.fillColor = UIColor.clear.cgColor  //填充路徑
  shPl.strokeColor = UIColor.red.cgColor   //描繪路徑 根據線寬來描繪
  self.view.layer.addSublayer(shPl)
  self.view.layer.backgroundColor = UIColor.white.cgColor
  ```
* 完成圖

![](http://toutiao.manqian.cn/img?url=http://images2015.cnblogs.com/blog/963010/201706/963010-20170623114124195-552031664.png)