SwiftUI-如何使Image capInsets起作用，以便不拉伸图像？

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

这是结果

您可以看到图像仍然被严重拉伸。我如何使capInsets工作？

[编辑1] -

我想要的是一个气泡图像，它的宽度和高度都可以增加。但是我不希望图像在拉伸时看起来失真。我应该使用CapInsets来防止这种情况。

Answer 1

为获得最佳结果，边缘插图应在图像中心保留一个“ 1x1像素”区域；调整大小后，只需重复图像的中间行和列即可。

所以你需要类似的东西

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

其中centerX和centerY指的是原始图像尺寸（您需要通过某种方式进行计算）

更新

如果使用资产，则可以直接在此处切片图像，因此可以省略EdgeInsets： 首先，按“显示切片”：

然后执行切片（“开始切片”，然后是“双箭头”），结果如下：