Рисовать несколько градиентов и внутреннюю тень в SwiftuiIOS

Программируем под IOS
Ответить
Anonymous
 Рисовать несколько градиентов и внутреннюю тень в Swiftui

Сообщение Anonymous »

Как я могу создать градиент металлического обода, а также внутреннюю тень, как видно на изображении ниже?

Код: Выделить всё

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()
}
Я использую Canvas, так как у меня будут другие элементы, нарисованные на нем позже. Как я могу получить похожие более легкие градиенты в противоположных положениях? Я также хотел бы получить внутреннюю тень.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... in-swiftui
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «IOS»