SwiftUI：在矩形上拉伸 LinearGradient

Question

我正在尝试在矩形上渲染线性渐变。这是代码：

Rectangle()
        .foregroundColor(Color.red)
        .overlay(
            LinearGradient(gradient: Gradient(colors: [.red, .yellow, .blue]), startPoint: .topLeading, endPoint: .bottomTrailing)
        )
        .frame(width: 300, height: 200)
        .position(x: 170, y: 120)

当我在正方形上渲染它时，一切看起来都是正确的：

然而，当我在矩形上渲染它时，它看起来不再像从 topLeading 角到 bottomTrailing。它看起来就像是被剪掉的一样：

这是它在 svg 中的呈现方式（蓝色看起来不一样，但这不是重要的部分），以及我希望它在 swift:

中的样子

黄色对角线应该从一个角直接指向另一个角，因为我指定的是 startPoint: .topLeading, endPoint: .bottomTrailing。它在这里说这是一个标准行为，没关系 - 我不是想说 SwiftUI 渲染不正确，我只是需要一种方法让它看起来像 svg。

Answer 1

多么有趣的问题:)

“幼稚”的方法是将渐变呈现为正方形，然后旋转它或挤压或拉伸它以适合矩形。旋转需要更多的数学知识，所以这里是“挤压”版本：

struct ContentView: View {
    var body: some View {
        
        Rectangle()
            .overlay(
                GeometryReader { g in
                    LinearGradient(
                        gradient: Gradient(colors: [.red, .yellow, .blue]),
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                    .frame(width: g.size.width, height: g.size.width)
                    .scaleEffect(x: 1.0, y: g.size.height / g.size.width, anchor: .top)
                }
            )
            .frame(width: 300, height: 200)
        
    }
}

备注：

要进行挤压，我们需要知道矩形的比例，您已经在使用 overlay() 并且在本例中叠加层由 Rectangle() 界定，因此我们可以使用几何阅读器（）；
我们需要从应用于正方形的渐变开始，有几种方法可以制作正方形。因为我们已经知道矩形的大小，所以我选择了一个边长等于封闭矩形宽度的正方形；
然后我们应用 scaleEffect()，将正方形的高度压缩到矩形的高度。

请告诉我这是否是您要找的，或者是否有更好的方法！

干杯， –巴格兰

SwiftUI：在矩形上拉伸 LinearGradient

SwiftUI: stretch LinearGradient on a rectangle

svg

rendering

linear-gradients

ios

swiftui