在 Swift 中绘制优美贝塞尔曲线的全面指导

2023-12-07 07:49:59

引言

贝塞尔（Bezier）[2] 曲线是计算机图形学中使用的一种数学模型，可用于表示流畅而优美的路径。这些路径在从动画到界面元素等各种应用程序中得到大量应用。在 Swift 中，使用 UIBezierPath API 可以轻松创建和操纵贝塞尔路径，为你的应用程序增添活力和美感。

了解贝塞尔路径

贝塞尔路径由一组控制点定义，这些控制点确定路径的形状和流向。对于线性路径，只需要两个控制点：起点和终点。对于更复杂的路径，可以使用多个控制点，形成二次或三次贝塞尔路径。

在 Swift 中创建贝塞尔路径

使用 UIBezierPath API，可以轻松创建和初始化贝塞尔路径：

let path = UIBezierPath()

然后，可以使用 move(to:) 方法设置路径的起点，并使用 addLine(to:) 方法添加额外的控制点。对于二次和三次贝塞尔路径，还可以使用 addQuadCurve(to:) 和 addCurve(to:) 方法。

操纵贝塞尔路径

一旦创建了贝塞尔路径，就可以使用各种方法对其进行操作，例如：

平移和缩放： 使用 apply(transform:) 方法应用变换，平移、缩放或两者兼施。
裁剪： 使用 append(path:) 方法与其他路径组合或使用 removeAllPoints() 方法清除路径中的所有点。
闭合： 使用 close() 方法闭合路径，形成一个完整的形状。

绘制贝塞尔路径

绘制贝塞尔路径需要一个当前图形上下文。在 iOS 和 macOS 应用程序中，通常使用 Core Graphics 框架来访问图形上下文：

let context = UIGraphics.getCurrentContext()
path.stroke()
context?.strokePath()

stroke() 方法在路径上绘制线条，而 context?.strokePath() 方法使用当前图形上下文的当前设置（例如线条宽度和颜色）绘制路径。

示例：绘制一个心形

为了说明如何使用贝塞尔路径，让我们绘制一个心形：

let path = UIBezierPath()
path.move(to: CGPoint(x: 50, y: 50))
path.addQuadCurve(to: CGPoint(x: 75, y: 75), controlPoint: CGPoint(x: 62.5, y: 62.5))
path.addQuadCurve(to: CGPoint(x: 50, y: 100), controlPoint: CGPoint(x: 62.5, y: 87.5))
path.addQuadCurve(to: CGPoint(x: 25, y: 75), controlPoint: CGPoint(x: 37.5, y: 87.5))
path.addQuadCurve(to: CGPoint(x: 50, y: 50), controlPoint: CGPoint(x: 37.5, y: 62.5))
path.close()