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

教學連結

• 使用貝賽爾曲線繪製路徑

範例

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

  let criclePath: UIBezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: 200, y: 100), radius: 50, startAngle: 0, endAngle: 5.12, clockwise: true)
  criclePath.stroke()

• 繪製一個矩形

  let rectPath: UIBezierPath = UIBezierPath.init(rect: CGRect.init(x: 100, y: 160, width: 50, height: 50))
  criclePath.append(rectPath)

• 繪製一個橢圓 原理是內接矩形，如果矩形的長寬相等那幺繪製的就是圓

  let ovalPath:UIBezierPath = UIBezierPath.init(ovalIn: CGRect.init(x: 200, y: 200, width: 100, height: 60))
  criclePath.append(ovalPath)

• 繪製直線多邊形 可以讓多條直線拼接 組合成複雜的形狀 比如繪製一個三角形

  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)

• 添加一個二階的曲線 二階曲線一共是三個點， 起點／終點／折點（控制點）

  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)

• 添加一個三階的曲線 起點 終點 兩個控制點 後面可以無限添加 二階曲線 形成一個很長的三階曲線

  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 用於顯示這些路徑

  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

• 完成圖