如何解决SwiftUI:在矩形上拉伸 LinearGradient
我正在尝试在矩形上呈现线性渐变。代码如下:
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 中的呈现方式(蓝色看起来不一样,但这不是重要的部分),以及我希望它如何快速显示:
黄色对角线应该直接从一个角到另一个角,因为我指定了 startPoint: .topLeading,endPoint: .bottomTrailing
。它在这里 SwiftUI diagonal LinearGradient in a rectangle 说这是一种标准行为,没关系 - 我不是想说 SwiftUI 渲染它不正确,我只是需要一种方法让它看起来像在 svg 中。
解决方法
多么有趣的问题:)
“天真的”方法是将渐变渲染为正方形,然后旋转或挤压或拉伸它以适合矩形。旋转需要更多的数学,所以这里是“挤压”版本:
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(),将正方形的高度压缩为矩形的高度。
请告诉我这是否是您要找的,或者是否有更好的方法来做到这一点!
干杯, ——巴格兰
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。