首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計疑難解答

iOS 中貝塞爾曲線路徑繪製完全可行,附實作參考連結

     編輯:程式設計疑難解答

iOS 完全支援貝塞爾曲線(Bézier Curve)路徑繪製,無論是二次、三次貝塞爾,還是任意階數,均可透過 UIBezierPath 或 Core Graphics (CGPath) 實現自定義軌跡繪製、動畫路徑、形狀遮罩等。

核心 API

  • UIBezierPath:Objective-C/Swift 友善封裝,支援 move(to:)、addLine(to:)、addQuadCurve(to:controlPoint:)、addCurve(to:controlPoint1:controlPoint2:) 等方法。
  • CAShapeLayer + UIBezierPath:將路徑賦予圖層,即可顯示、描邊、填充、動畫(strokeStart/strokeEnd)。
  • CGPath / CGMutablePath:Core Graphics 底層 API,效能更高,適合大量路徑運算。

典型應用場景

  1. 自定義繪圖板:觸控採樣點 → 貝塞爾平滑 → 即時渲染。
  2. 路徑動畫:CAKeyframeAnimation 的 path 屬性設為貝塞爾路徑,物件沿曲線移動。
  3. 波浪/水波紋效果:正弦曲線或多段貝塞爾拼接 + CABasicAnimation 位移。
  4. 圖形遮罩/裁剪:layer.mask = shapeLayer 實現非矩形顯示區域。

參考實作教學

詳細程式碼範例請參考:iOS 貝塞爾曲線路徑繪製完整教學

Swift 簡易範例:繪製三次貝塞爾曲線

let path = UIBezierPath()
path.move(to: CGPoint(x: 50, y: 200))
path.addCurve(to: CGPoint(x: 300, y: 200),
              controlPoint1: CGPoint(x: 100, y: 50),
              controlPoint2: CGPoint(x: 250, y: 350))

let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = UIColor.systemBlue.cgColor
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineWidth = 3
view.layer.addSublayer(shapeLayer)

// 路徑動畫
let anim = CABasicAnimation(keyPath: "strokeEnd")
anim.fromValue = 0
anim.toValue = 1
anim.duration = 2
shapeLayer.add(anim, forKey: "draw")

掌握控制點對曲線形狀的影響,即可自由繪製任意平滑軌跡。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved