📦Canvas

💈範例

Every canvas has a context and a size to work with.

struct HexagonView: View {
    var body: some View {
        // ⭐️ canvas
        Canvas { context, size in
            // ⭐️ draw text
            context.draw(
                Text("Design+Code"),
                at: CGPoint(x: 100, y: 100)
            )
            // ⭐️ draw image
            context.draw(
                Image("Blob 1"),
                in: CGRect(x: 50, y: 150, width: 300, height: 200)
            )
            context.draw(
                Image(systemName: "hexagon"),
                // ⭐️ image size relative to parent
                in: CGRect(x: 25, y: 150, width: size.width/4, height: size.height/6)
            )
            // ⭐️ fill path
            context.fill(
                Path(ellipseIn: CGRect(x: 10, y: 10, width: 50, height: 50)),
                with: .color(.red)
            )
        }
    }
}

a canvas view

⭐️ 重點

// declaration
struct Canvas<Symbols> where Symbols : View

📘 手冊

• SwiftUI ⟩ Drawing and Animation

  • Canvas (struct)

  • GraphicsContext (struct)

📗 參考

• Design+Code - Graphics in Canvas

• Frigerio ⟩ Introduction to Canvas in SwiftUI

• WWDC21 ⟩ Add rich graphics to your SwiftUI app