13.3_在 Canvas 中绘制动态图形

Canvas 基础与路径绘制

在 SwiftUI 中，Canvas 视图为你提供了一个强大的绘图环境。你可以像在画板上一样，自由地绘制各种图形。这对于创建自定义视图和复杂动画至关重要。🎨

使用 GraphicsContext 对象，你可以访问丰富的绘图功能。它允许你绘制路径、形状、文本和图像。

• 路径 (Paths)：路径是绘制复杂图形的基础。你可以定义一系列点和线段来创建任何你想要的形状。
• 形状 (Shapes)：SwiftUI 内置了许多基本形状，如矩形、圆形和椭圆。你可以直接使用它们。

例如，你可以轻松绘制一个简单的矩形。只需几行代码，一个漂亮的矩形就会呈现在你的 Canvas 上。

Canvas { context, size in
    let rect = CGRect(x: 0, y: 0, width: 100, height: 100)
    context.fill(Path(rect), with: .color(.blue))
}

绘制复杂图形与填充

Canvas 不仅仅能绘制简单的形状。你可以通过组合路径来创建更复杂的图形。想象一下，你可以绘制出任何你脑海中的图案！✨

填充和描边是图形绘制的两个核心概念。

• 填充 (Fill)：用颜色或渐变填充图形的内部区域。
• 描边 (Stroke)：沿着图形的边缘绘制线条。

你可以使用不同的颜色、渐变甚至图像来填充你的图形。这为你的设计带来了无限可能。例如，你可以用一个漂亮的径向渐变填充一个圆形。

Canvas { context, size in
    let circle = Path(ellipseIn: CGRect(x: 0, y: 0, width: 100, height: 100))
    context.fill(circle, with: .radialGradient(.init(colors: [.red, .yellow]), center: .zero, startRadius: 0, endRadius: 50))
}

文本与图像的集成

除了形状，Canvas 还支持绘制文本和图像。这让你的绘图内容更加丰富多彩。你可以将文字和图片无缝地融入你的设计中。

• 绘制文本：你可以指定字体、颜色和位置来绘制文本。这对于创建自定义标签或信息显示非常有用。
• 绘制图像：将图像直接绘制到 Canvas 上，并控制其大小和位置。这对于创建自定义图标或背景非常方便。

例如，你可以在 Canvas 上绘制一段欢迎文字。这会立即提升用户体验。

Canvas { context, size in
    context.draw(Text("你好，Canvas！").font(.largeTitle), at: CGPoint(x: size.width / 2, y: size.height / 2))
}

变换与效果应用

Canvas 提供了强大的变换功能，让你可以对绘制的元素进行缩放、旋转和平移。这使得创建动态和交互式图形变得轻而易举。

• 缩放 (Scale)：改变元素的大小。
• 旋转 (Rotate)：围绕一个点旋转元素。
• 平移 (Translate)：移动元素的位置。

你还可以应用各种视觉效果，如模糊、阴影和颜色调整。这些效果能让你的图形看起来更专业、更具吸引力。例如，你可以给一个矩形添加一个漂亮的阴影效果。

Canvas { context, size in
    context.addFilter(.shadow(color: .black, radius: 5))
    context.fill(Path(CGRect(x: 0, y: 0, width: 100, height: 100)), with: .color(.green))
}