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 diagonal LinearGradient in a rectangle 这是一种标准行为，没关系 - 我并不是说 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() 限定，所以我们可以使用 GeometryReader( );
• 我们需要从应用于正方形的渐变开始，有几种方法可以制作正方形。由于我们已经知道矩形的大小，所以我选择了一个边长等于封闭矩形宽度的正方形；
• 然后我们应用 scaleEffect()，将正方形的高度压缩到矩形的高度。

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

干杯， ——巴格兰