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)

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

然而，当我在矩形上渲染它时，它看起来不再像从顶部前角到底部尾随。它看起来就像是被剪辑的同一个：

这是它在 svg 中的渲染方式（蓝色看起来不一样，但这不是重要的部分），以及我希望它在 swift 中的外观：

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

Answer 1

多么有趣的问题:)

\n

“天真的”方法是将渐变渲染为正方形，然后旋转它或挤压或拉伸它以适合矩形。旋转需要更多数学运算，因此这是“挤压”版本：

\n

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

\n

笔记：

\n

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

\n

请告诉我这是否是您正在寻找的或者是否有更好的方法来做到这一点！

\n

干杯，\n\xe2\x80\x93Baglan

\n