Заполнение круга с центрированным угловым градиентом не соответствует центру

Question

Я смотрел видео сеанса WDDC 237 и увидел интересный пример создания «цветового круга» в виде круга с использованием градиентов и фигур с помощью SwiftUI, поэтому я попытался продублировать его в своем коде, но не получилтот же результат.

Это код:

let spectrum = Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red])
let conic = AngularGradient(gradient: spectrum, center: .center, angle: Angle(degrees: -90))
return Circle().fill(conic)

Но он центрируется у основания, а не по центру круга.С другой стороны, выполнение того же примера на Ellipse и Capsule работает, как и ожидалось:

Эллипс:

let spectrum = Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red])
let conic = AngularGradient(gradient: spectrum, center: .center, angle: Angle(degrees: -90))
return Ellipse().fill(conic)

Капсула:

let spectrum = Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red])
let conic = AngularGradient(gradient: spectrum, center: .center, angle: Angle(degrees: -90))
return Capsule().fill(conic)

Вот изображения того, как эти трое выглядят:

Это ошибка или я что-то упустил?

Answer 1

Circle, кажется, требует aspectRatio == .fit, для работы градиента.

struct ContentView : View {

    var body: some View {
        let spectrum = Gradient(colors: [
            .red, .yellow, .green, .blue, .purple, .red
        ])
        let conic = AngularGradient(gradient: spectrum,
                                    center: .center,
                                    angle: Angle(degrees: -90))
        return VStack {
            Circle().fill(conic).aspectRatio(contentMode: .fit)
            Ellipse().fill(conic)
            Capsule().fill(conic)
        }
    }

}

Выход :

Answer 2

Нарисуйте сам эллипс с соотношением сторон,

как

return Ellipse()
    .fill(conic)
    .aspectRatio(contentMode: .fit)

ОБНОВЛЕНИЕ:

Если модификатор .aspectRatio(contentMode: .fit) применен к любому из этихтри фигуры, он нарисует круг.