使用 Shape 绘制基本图形

在 SwiftUI 中，Shape 协议允许你创建自定义的图形。通过实现 Shape 协议，你可以绘制基本图形，如矩形、圆形、线条等，并对它们进行自定义。以下是如何使用 Shape 绘制基本图形的介绍和示例。

1. 矩形（Rectangle）

使用 Rectangle 可以轻松绘制矩形，并可以设置其填充颜色和边框。

示例：绘制矩形

import SwiftUI

struct RectangleExample: View {
    var body: some View {
        Rectangle()
            .fill(Color.blue) // 设置填充颜色
            .frame(width: 200, height: 100) // 设置大小
            .cornerRadius(20) // 设置圆角
            .border(Color.black, width: 2) // 设置边框
            .padding()
    }
}

2. 圆形（Circle）

使用 Circle 可以绘制完美的圆形，同样可以设置填充和边框。

示例：绘制圆形

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

3. 椭圆（Ellipse）

Ellipse 可以绘制椭圆形，宽高比可以自定义。

示例：绘制椭圆

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

4. 自定义形状（Custom Shape）

通过实现 Shape 协议，你可以创建自定义形状。

示例：自定义三角形

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.midX, y: rect.minY)) // 顶点
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY)) // 左下角
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY)) // 右下角
        path.closeSubpath() // 关闭路径
        return path
    }
}

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

5. 路径（Path）

Path 允许你绘制复杂的图形和线条。

示例：绘制路径

struct PathExample: View {
    var body: some View {
        Path { path in
            path.move(to: CGPoint(x: 50, y: 50)) // 起点
            path.addLine(to: CGPoint(x: 150, y: 50)) // 线段
            path.addLine(to: CGPoint(x: 100, y: 150)) // 线段
            path.closeSubpath() // 关闭路径
        }
        .fill(Color.purple) // 填充颜色
        .overlay(Path { path in
            path.move(to: CGPoint(x: 50, y: 50))
            path.addLine(to: CGPoint(x: 150, y: 50))
            path.addLine(to: CGPoint(x: 100, y: 150))
            path.closeSubpath()
        }.stroke(Color.black, lineWidth: 2)) // 设置边框
        .padding()
    }
}

6. 总结

  • 基本图形：使用内置的 Rectangle、Circle、Ellipse 绘制简单形状。
  • 自定义形状：通过实现 Shape 协议，可以创建自定义形状。
  • 路径：使用 Path 绘制更复杂的图形和线条。

通过使用 Shape 和 Path，你可以在 SwiftUI 中灵活地创建各种基本和复杂的图形，增强应用的视觉效果。

Last Updated::