用居中 angular 渐变填充圆圈未正确居中

Question

我在观看 WDDC session 237 视频时看到了一个有趣的示例，该示例使用 SwiftUI 使用渐变和形状创建了一个 "color wheel" 式的圆圈，所以我尝试在我的代码中复制它，但我没有不会得到相同的结果。

这是代码：

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

绘制长宽比的椭圆，

喜欢

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

更新：

如果.aspectRatio(contentMode: .fit)修改器应用于这三个形状中的任何一个，它将绘制一个圆。

Answer 2

Circle 似乎需要 .aspectRatio(contentMode: ContentMode.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)
        }
    }

}

输出:

用居中 angular 渐变填充圆圈未正确居中

Filling a circle with a centered angular gradient does not properly center

gradient

swift

swiftui