使用 Path 创建自定义图形

在 SwiftUI 中，Path 允许你绘制复杂的自定义图形。通过定义路径，可以创建任意形状的图形，并对其进行样式和动画处理。以下是如何使用 Path 创建自定义图形的介绍和示例。

1. 创建基本的 Path

要使用 Path，你需要创建一个实现其绘制逻辑的结构体。在 path(in:) 方法中定义图形的路径。

示例：绘制简单的五边形

import SwiftUI

struct Pentagon: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        // 定义五边形的五个顶点
        let points = [
            CGPoint(x: rect.midX, y: rect.minY),
            CGPoint(x: rect.maxX, y: rect.midY - rect.height / 4),
            CGPoint(x: rect.maxX, y: rect.midY + rect.height / 4),
            CGPoint(x: rect.midX, y: rect.maxY),
            CGPoint(x: rect.minX, y: rect.midY + rect.height / 4),
            CGPoint(x: rect.minX, y: rect.midY - rect.height / 4)
        ]
        
        // 移动到五边形的第一个顶点并添加线条
        path.move(to: points[0])
        for i in 1..<points.count {
            path.addLine(to: points[i])
        }
        path.closeSubpath() // 关闭路径

        return path
    }
}

struct PentagonExample: View {
    var body: some View {
        Pentagon()
            .fill(Color.orange) // 设置填充颜色
            .frame(width: 200, height: 200) // 设置大小
            .overlay(Pentagon().stroke(Color.black, lineWidth: 2)) // 设置边框
            .padding()
    }
}

2. 使用贝塞尔曲线

Path 也支持贝塞尔曲线，这可以帮助你创建更平滑的形状。

示例：绘制心形图案

struct HeartShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        path.move(to: CGPoint(x: rect.midX, y: rect.maxY))
        
        path.addCurve(to: CGPoint(x: rect.minX, y: rect.midY),
                      control1: CGPoint(x: rect.midX - rect.width / 2, y: rect.maxY - rect.height / 2),
                      control2: CGPoint(x: rect.minX, y: rect.midY - rect.height / 2))

        path.addArc(center: CGPoint(x: rect.minX + rect.width / 4, y: rect.midY - rect.height / 4),
                     radius: rect.width / 4,
                     startAngle: .degrees(0),
                     endAngle: .degrees(180),
                     clockwise: false)

        path.addArc(center: CGPoint(x: rect.maxX - rect.width / 4, y: rect.midY - rect.height / 4),
                     radius: rect.width / 4,
                     startAngle: .degrees(0),
                     endAngle: .degrees(180),
                     clockwise: false)

        path.addCurve(to: CGPoint(x: rect.midX, y: rect.maxY),
                      control1: CGPoint(x: rect.maxX, y: rect.midY - rect.height / 2),
                      control2: CGPoint(x: rect.midX + rect.width / 2, y: rect.maxY - rect.height / 2))

        return path
    }
}

struct HeartShapeExample: View {
    var body: some View {
        HeartShape()
            .fill(Color.red) // 设置填充颜色
            .frame(width: 200, height: 200) // 设置大小
            .padding()
    }
}

3. 动态路径

你可以使用状态和动画动态修改 Path，创建交互效果。

示例：动态路径动画

struct DynamicPathExample: View {
    @State private var animate = false

    var body: some View {
        VStack {
            Button("Animate") {
                withAnimation {
                    animate.toggle() // 切换状态
                }
            }
            .padding()

            CustomDynamicShape(animate: animate)
                .fill(Color.blue)
                .frame(width: 200, height: 200) // 设置大小
                .padding()
        }
    }
}

struct CustomDynamicShape: Shape {
    var animate: Bool

    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        // 动态调整路径的形状
        let midX = animate ? rect.midX + 30 : rect.midX
        let midY = animate ? rect.midY + 30 : rect.midY

        path.move(to: CGPoint(x: rect.minX, y: rect.minY))
        path.addLine(to: CGPoint(x: midX, y: midY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: midX, y: midY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.minY))

        return path
    }
}

4. 总结

  • 使用 Path：通过实现 Shape 协议中的 path(in:) 方法创建自定义图形。
  • 贝塞尔曲线：使用 addCurve 和 addArc 方法绘制更复杂的曲线。
  • 动态路径：结合状态和动画，创建动态和交互式的图形效果。

通过使用 Path，你可以在 SwiftUI 中灵活地创建各种自定义图形，增强用户界面的视觉效果。

Last Updated::