SwiftUI - 如何使图像 capInsets 工作以使图像不被拉伸(stretch)？

Question

这是我的代码

import SwiftUI
struct ContentView : View {
    var body: some View {
        Image(systemName: "bubble.right")
            .resizable(capInsets: EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
            .frame(width: 200, height: 100)
    }
}
#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

这是结果

您可以看到图像仍然严重拉伸(stretch)。我怎样才能让 capInsets 工作？

[编辑 1] -

我想要的是一个可以增加宽度和高度的气泡图像。但我不希望图像在拉伸(stretch)时看起来变形。使用 CapInsets，我应该可以防止这种情况发生。

Answer 1

为获得最佳效果，边缘插图应在图像中心留下“1x1 像素”区域；这将在调整大小时仅重复图像的中间行和列。

所以你需要类似的东西

EdgeInsets(top:centerY-1.0, leading:centerY-1.0, bottom:centerY, trailing:centerX)

其中 centerX 和 centerY 指的是原始图像大小(您需要以某种方式计算)

更新

如果你使用 Assets ，你可以直接在那里切片图像，所以你可以省略 EdgeInsets:首先，按“显示切片”:

然后，执行切片(“开始切片”，然后是“双箭头”)，结果如下: