SwiftUI教程：掌握2D图形绘制的奥秘

IOS

2024-01-29 12:32:23

SwiftUI中的2D图形绘制

SwiftUI为iOS和macOS应用程序开发人员提供了强大的工具集，其中包括绘制2D图形的功能。通过直观的API，你可以轻松创建和操纵各种形状，为你的用户界面增添视觉吸引力。

内置形状

SwiftUI提供了各种预定义的形状，包括：

圆形（Circle） ：绘制一个圆形，指定半径以控制大小。
圆角矩形（RoundedRectangle） ：绘制一个圆角矩形，设置圆角半径以调整边缘的圆滑度。
椭圆（Ellipse） ：绘制一个椭圆，指定宽度和高度以控制其形状和大小。
矩形（Rectangle） ：绘制一个矩形，指定宽度和高度以控制其大小和形状。

自定义路径

除了内置形状，你还可以使用Path结构来创建自定义路径。路径由一系列连线段组成，可以创建复杂和动态的形状。你可以使用以下方法来构建路径：

moveTo(x:y:) ：将路径移动到指定的起点。
addLine(to:y:) ：从当前点到指定的终点绘制一条直线。
addCurve(to:y:control1:control2:) ：从当前点到指定的终点绘制一条二次贝塞尔（Bezier）路径。
addQuadCurve(to:y:control:) ：从当前点到指定的终点绘制一条二次贝塞尔（Bezier）路径。

自定义形状

你可以通过两种方式创建自定义形状：

继承自Shape协议 ：创建了一个遵循Shape协议的自定义类型，并实现其path(in:)方法来定义形状的路径。
使用@ViewBuilder构建 ：使用@ViewBuilder闭包创建视图，并使用GeometryReader访问画布几何形状以动态地计算形状的路径。

SwiftUI中的2D图形绘制示例

以下是SwiftUI中2D图形绘制的一些示例：

创建圆形进度条：

struct CircularProgressBar: View {
    var progress: CGFloat
    var body: some View {
        ZStack {
            Circle()
                .stroke(lineWidth: 20.0)
                .opacity(0.3)
                .frame(width: 200, height: 200)
            Circle()
                .trim(from: 0.0, to: progress)
                .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                .frame(width: 200, height: 200)
        }
    }
}

绘制自定义星形：

struct StarShape: Shape {
    var points: [CGPoint]
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let center = CGPoint(x: rect.midX, y: rect.midY)
        for i in 0..<points.count {
            let point = points[i]
            path.move(to: point)
            for j in 0..<points.count {
                if i != j {
                    let nextPoint = points[j]
                    path.addLine(to: nextPoint)
                }
            }
        }
        path.closeSubpath()
        return path
    }
}