SwiftUI 极简教程 11：Path 路径的使用

2023-11-05 09:07:52

从直线开始

最简单的路径是一个直线。你可以使用 addLine(to:) 方法来创建一条从一个点到另一个点的直线。例如，以下代码创建一条从点 (0, 0) 到点 (100, 100) 的直线：

let path = Path { path in
    path.move(to: CGPoint(x: 0, y: 0))
    path.addLine(to: CGPoint(x: 100, y: 100))
}

你可以使用 stroke() 方法来给路径描边，也可以使用 fill() 方法来填充路径。例如，以下代码创建一个红色的、填充的路径：

path.stroke(Color.red, lineWidth: 2)
path.fill(Color.red)

创建形状

路径也可以用来创建形状。你可以使用 addRect() 方法来创建一个矩形，也可以使用 addEllipse() 方法来创建一个椭圆。例如，以下代码创建一个红色的、填充的矩形：

let path = Path { path in
    path.addRect(CGRect(x: 0, y: 0, width: 100, height: 100))
}

path.fill(Color.red)

使用路径创建动画

路径还可以用来创建动画。你可以使用 animate() 方法来让路径随着时间的推移发生变化。例如，以下代码创建一个从点 (0, 0) 到点 (100, 100) 的直线，然后让这条线随着时间的推移消失：

let path = Path { path in
    path.move(to: CGPoint(x: 0, y: 0))
    path.addLine(to: CGPoint(x: 100, y: 100))
}

path.stroke(Color.red, lineWidth: 2)

path.animate(using: .linear(duration: 1)) { path in
    path.opacity = 0
}

使用 Core Graphics 创建更复杂的路径

Core Graphics 是一个低级别的绘图库，它提供了更强大的路径创建功能。你可以使用 Core Graphics 来创建贝塞尔曲线、圆弧和其他复杂的路径。例如，以下代码创建一个红色的、填充的贝塞尔曲线：

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addCurve(to: CGPoint(x: 100, y: 100), controlPoint1: CGPoint(x: 50, y: 0), controlPoint2: CGPoint(x: 50, y: 100))

path.fill(Color.red)