SwiftUI中如何正确合并图像并匹配背景图的缩放与位置？

我需要将两张数字图像（紫色数字6、红色数字1）合并为单张图并转成Base64字符串，合并后要能匹配背景蛋糕图的缩放与位置，方便后续叠加在蛋糕图上。但当前使用的combine函数生成的结果缩放和位置都不对。

现有代码如下：

合并图像的函数 #

func combine(with: UIImage) -> UIImage {
    let baseImage = self
    let rect = CGRect(origin: CGPoint.zero, size: baseImage.size)
    print("combine rect: \(rect)")
        
    let canvasSize = CGSizeMake(rect.width, rect.height)

    let renderer = UIGraphicsImageRenderer(size: canvasSize)
    return renderer.image { context in
        baseImage.draw(in: rect)
        with.draw(in: rect)
    }
}

SwiftUI背景图代码 #

private var backgroundImage: some View {
    ZStack {
        KFImage(viewModel.imageUrl)
            .resizable()
            .scaledToFit()
            .overlay {
                DigitView($viewModel.canvasImage)
            }
    }
}

错误原因 #

当前combine函数存在两个核心问题：

• 画布尺寸基于数字图的原始尺寸创建，而非背景蛋糕图的实际显示尺寸（scaledToFit后蛋糕图的大小是根据父容器动态调整的，和原始尺寸无关）。
• 两张数字图直接按原始尺寸叠加在画布的(0,0)位置，没有根据蛋糕图的缩放比例调整自身大小和位置，导致叠加后错位。

修正方案 #

1. 传递蛋糕图的实际显示尺寸

在SwiftUI中通过GeometryReader获取蛋糕图缩放后的实际尺寸，传递给DigitView：

private var backgroundImage: some View {
    ZStack {
        KFImage(viewModel.imageUrl)
            .resizable()
            .scaledToFit()
            .overlay {
                GeometryReader { geoProxy in
                    DigitView(canvasImage: $viewModel.canvasImage, targetSize: geoProxy.size)
                }
            }
    }
}

2. 修改combine函数适配目标尺寸

基于蛋糕图的实际尺寸创建画布，同时按比例缩放数字图，确保合成图与蛋糕图的缩放、位置匹配：

func combine(with otherImage: UIImage, targetSize: CGSize) -> UIImage {
    // 以蛋糕图的实际显示尺寸作为合成画布的大小
    let renderer = UIGraphicsImageRenderer(size: targetSize)
    
    return renderer.image { context in
        // 处理第一张数字图的缩放与居中（可根据需求调整位置）
        let scale1 = min(targetSize.width / self.size.width, targetSize.height / self.size.height)
        let scaledSize1 = CGSize(width: self.size.width * scale1, height: self.size.height * scale1)
        let drawRect1 = CGRect(
            x: (targetSize.width - scaledSize1.width) / 2,
            y: (targetSize.height - scaledSize1.height) / 2,
            width: scaledSize1.width,
            height: scaledSize1.height
        )
        self.draw(in: drawRect1)
        
        // 处理第二张数字图的缩放与居中（如果需要不同位置，可修改x/y偏移）
        let scale2 = min(targetSize.width / otherImage.size.width, targetSize.height / otherImage.size.height)
        let scaledSize2 = CGSize(width: otherImage.size.width * scale2, height: otherImage.size.height * scale2)
        let drawRect2 = CGRect(
            x: (targetSize.width - scaledSize2.width) / 2,
            y: (targetSize.height - scaledSize2.height) / 2,
            width: scaledSize2.width,
            height: scaledSize2.height
        )
        otherImage.draw(in: drawRect2)
    }
}

3. 在DigitView中调用修正后的函数

在DigitView里拿到传递过来的targetSize，调用combine时传入该尺寸：

// 假设DigitView的定义
struct DigitView: View {
    @Binding var canvasImage: UIImage?
    let targetSize: CGSize
    
    var body: some View {
        // 这里替换成你的数字图获取逻辑
        Button("合并数字图") {
            guard let image6 = UIImage(named: "digit6"), let image1 = UIImage(named: "digit1") else { return }
            let combinedImage = image6.combine(with: image1, targetSize: targetSize)
            canvasImage = combinedImage
            // 转Base64的逻辑
            if let data = combinedImage.pngData() {
                let base64String = data.base64EncodedString()
                print("Base64: \(base64String)")
            }
        }
    }
}

关键说明 #

• 通过GeometryReader获取的geoProxy.size是蛋糕图经过scaledToFit后的实际渲染尺寸，以此为基准创建合成画布，能保证合成图的尺寸和蛋糕图完全匹配。
• 计算缩放比例时使用min(宽缩放比, 高缩放比)，确保数字图完整显示在画布内（和scaledToFit的逻辑一致），如果需要填满画布可改用max。
• 数字图的位置可根据需求调整drawRect的x、y值，比如要放在蛋糕图的某个特定区域，只需修改偏移量即可。

内容的提问来源于stack exchange，提问作者Sachinthana Aluvihare