swift - SwiftUI - 如何使图像 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，我应该防止这种情况。

标签： swiftswiftui

Answer 1

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

所以你需要类似的东西

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

在哪里centerX并centerY参考原始图像大小（您需要以某种方式计算）

更新

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

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