Radialer Farbverlauf im Canvas

Beschreibung

Diese View zeichnet mit dem Canvas eine Ellipse, die über einen radialen Farbverlauf von Gelb zu Rot schattiert wird. Der Verlauf ist in der Mitte zentriert und füllt den verfügbaren Bereich, wodurch ein leuchtender Spotlight Effekt entsteht.

🔍 Zweck

• Hintergrundelemente mit weicher Lichtwirkung gestalten
• Verläufe für Badges oder dekorative UI Elemente erzeugen
• Prototyping von Charts mit radialen Highlights
• Lernbeispiel für GraphicsContext.Shading im Canvas
• Erstellung individueller Grafiken ohne externe Assets

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

@main
struct RadialGradientCanvasApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

public struct ContentView: View {
    public init() {}

    public var body: some View {
        Canvas { context, size in
            // Define a radial gradient shading from center to the edges
            let shading = GraphicsContext.Shading.radialGradient(
                Gradient(colors: [.yellow, .orange, .red]),
                center: CGPoint(x: size.width / 2, y: size.height / 2),
                startRadius: 10,
                endRadius: max(size.width, size.height) / 2
            )

            // Draw an ellipse that covers the entire canvas
            let rect = CGRect(origin: .zero, size: size)
            let ellipse = Path(ellipseIn: rect)

            // Fill the ellipse using the radial gradient shading
            context.fill(ellipse, with: shading)
        }
        .frame(width: 200, height: 200)
        .cornerRadius(20)
        .padding()
        // Optional background to better showcase the gradient edge
        .background(Color(.systemBackground))
    }
}

// Modern Swift 5.10+ preview syntax
#Preview {
    ContentView()
}