SwiftUI

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：首先，按 "Show Slicing"：

然后，执行切片（"Start Slicing"，然后是 "double arrow"），结果如下：

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

SwiftUI - How to make Image capInsets work so that image is not stretched?

swift

更新