Zeichnen Sie mehrere Gradienten und innere Schatten in Swiftui
Posted: 23 Apr 2025, 08:33
Wie kann ich den metallischen Felgen -Gradienten sowie den inneren Schatten erstellen, wie im Bild unten zu sehen ist?
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.>
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()
}