如何在 SwiftUI 中缩放图像

Question

如何在 SwiftUI 中以尊重布局的方式缩小图像？

我可以做

Image("My Image")
    .scaleEffect(0.25)

这将绘制缩小的图像，但在 SwiftUI 布局中它仍然会占用相同的空间。添加时

Image("My Image")
    .resizable()
    .scaleEffect(0.25)

它现在可以调整大小，这不是一回事，它现在可以根据父视图进行拉伸。

所有答案都在这里： 如何使用 SwiftUI 调整图像大小？

使用可调整大小或scaledToFill等，这要么使图像被父视图拉伸或缩放以填充空间，要么使用.frame将其设置为我也不想这样做的特定大小。我只想获取图像的原始尺寸（我不想硬编码），但将其缩小。

所有答案都在这里：缩小图像和框架 依赖于了解图像尺寸。

对基本问题表示歉意，但我无法在任何地方找到答案。谢谢！

Answer 1

如果不知道原始图像的大小，您将无法实现框架缩放。这是一个解决方案，它接受图像的名称并创建一个 UIImage 来获取图像的原始大小。

以这种方式缩放时，新框架仅根据新比例占用空间。

struct SwiftUIView: View {
    let imageName: String = "My Image"
    
    var body: some View {
        Image(self.imageName)
            .scaleImage(ratio: 0.5, imageName: self.imageName)
            .background(.red)
    }
}

extension Image {
    func scaleImage(ratio: Double, imageName: String) -> some View {
        let uiImage = UIImage(named: imageName)!
        
        var size = uiImage.size
        size = CGSize(width: size.width * ratio, height: size.height * ratio)
        
        return self
            .resizable()
            .frame(width: size.width, height: size.height)
    }
}

Answer 2

我建议将所需尺寸的

.frame

应用于

Image

，然后使用

.scaledToFit

或

.scaledToFill

。这样，布局中将正常考虑图像的大小。如果帧与图像具有相同的纵横比，那么使用两个修改器中的哪一个并不重要，因为生成的缩放图像是相同的。

如果您不知道图像的大小，或者不想对其进行硬编码，可以使用以下技术来查找显示视图时的大小：

1。将图像创建为 UIImage

A

UIImage

有一个可以读取的

size

。

ZStack {
    if let image = UIImage(named: "My Image") {
        Image(uiImage: image)
            .resizable()
            .scaledToFit()
            .frame(width: image.size.width * 0.25, height: image.size.height * 0.25)
    }
}
.border(.red)

2。测量隐藏背景图像的大小

@State private var imageSize = CGSize.zero

ZStack {
    Image("My Image")
        .resizable()
        .scaledToFit()
        .frame(width: imageSize.width * 0.25, height: imageSize.height * 0.25)
}
.border(.red)
.background {
    Image("My Image")
        .overlay {
            GeometryReader { proxy in
                Color.clear
                    .onAppear() {
                        imageSize = proxy.size
                    }
            }
        }
        .hidden()
}