Zeichnen Sie mehrere Gradienten und innere Schatten in Swiftui ⇐ IOS

[Anonymous]

Wie kann ich den metallischen Felgen -Gradienten sowie den inneren Schatten erstellen, wie im Bild unten zu sehen ist?

Code: Select all

import SwiftUI

struct GradientDishView: View {
private let containerSize: CGFloat = 300

var body: some View {
VStack {
Spacer()

ZStack {

Canvas { context, size in

let currentCenter = CGPoint(x: containerSize / 2, y: containerSize / 2)

let baseRadius = containerSize / 2
let innerRimRadius = baseRadius * 0.90
let fillRadius = innerRimRadius
let rimWidth = baseRadius - innerRimRadius

// inner fill
let innerPath = Path(ellipseIn: CGRect(
x: currentCenter.x - fillRadius, y: currentCenter.y - fillRadius,
width: fillRadius * 2, height: fillRadius * 2
))
context.fill(innerPath, with: .color(Color.green))

// gradient rim
let rimGradient = Gradient(stops: [
Gradient.Stop(color: Color(white: 0.9), location: 0.0),
Gradient.Stop(color: Color(white: 0.7), location: 0.2),
Gradient.Stop(color: Color(white: 0.9), location: 0.35),
Gradient.Stop(color: Color(white: 0.7), location: 0.45),
Gradient.Stop(color: Color(white: 0.9), location: 0.6),
Gradient.Stop(color: Color(white: 0.7), location: 0.7),
Gradient.Stop(color: Color(white: 0.9), location: 0.85),
Gradient.Stop(color: Color(white: 0.7), location: 0.95),
Gradient.Stop(color: Color(white: 0.9), location: 1.0)
])
let rimCenterRadius = (baseRadius + innerRimRadius) / 2
let rimStrokePath = Path(ellipseIn: CGRect(
x: currentCenter.x - rimCenterRadius,
y: currentCenter.y - rimCenterRadius,
width: rimCenterRadius * 2,
height: rimCenterRadius * 2
))
let gradientStart = CGPoint(x: currentCenter.x - baseRadius,
y: currentCenter.y - baseRadius)
let gradientEnd = CGPoint(x: currentCenter.x + baseRadius,
y: currentCenter.y + baseRadius)
context.stroke(rimStrokePath,
with: .linearGradient(rimGradient, startPoint: gradientStart, endPoint: gradientEnd), lineWidth: rimWidth)
}
.frame(width: containerSize, height: containerSize)
.shadow(color: .black.opacity(0.5), radius: 20, x: 0, y: 0)
}

Spacer()
}
}
}

#Preview {
GradientDishView()
}

Ich verwende eine Leinwand, da ich später noch andere Elemente darüber verzeichnen werde. Wie kann ich an den entgegengesetzten Positionen ähnliche leichtere Gradienten bekommen? Ich möchte auch den inneren Schatten zeigen.>