SwiftUI中Vision框架文本检测后翻译文本定位错误求助

你的核心问题是坐标转换逻辑错误，导致翻译文本位置偏移或堆叠。Vision框架的boundingBox是归一化坐标（范围0-1），且坐标系原点在左下角，而SwiftUI的坐标系原点在左上角，同时图片缩放后的坐标计算需要更严谨的处理。

关键修改点 #

• 修正图片缩放后的坐标映射，避免重复缩放
• 调整翻译文本位置到原文本正下方，并添加间距
• 增加索引越界防护，避免异步翻译导致的数组不匹配

修改后的显示代码 #

GeometryReader { geometry in
    ZStack(alignment: .topLeading) {
        Image(uiImage: image ?? UIImage())
            .resizable()
            .scaledToFit()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        
        ForEach(recognizedText.indices, id: \.self) { index in
            // 防止翻译结果数组索引越界
            guard index < translatedText.count, let translation = translatedText[index] else { return }
            
            let (_, box) = recognizedText[index]
            let originalImageSize = image?.size ?? .zero
            
            // 计算图片实际显示的尺寸（按宽度适配）
            let displayWidth = geometry.size.width
            let displayHeight = (displayWidth / originalImageSize.width) * originalImageSize.height
            let displaySize = CGSize(width: displayWidth, height: displayHeight)
            
            // 转换Vision坐标系（左下角原点）到SwiftUI坐标系（左上角原点）
            let textX = box.origin.x * displaySize.width
            let textY = (1 - box.origin.y - box.height) * displaySize.height
            let textFrame = CGRect(
                x: textX,
                y: textY,
                width: box.width * displaySize.width,
                height: box.height * displaySize.height
            )
            
            // 翻译文本放在原文本下方，预留20pt间距
            Text(translation)
                .background(Color.yellow)
                .font(.caption)
                .position(
                    x: textFrame.midX,
                    y: textFrame.maxY + 20
                )
        }
    }
}
.padding()

额外优化建议 #

1. 同步翻译结果与识别文本：由于翻译是异步操作，建议用[Int: String]字典存储索引对应的翻译结果，避免数组顺序错乱。比如在translateText方法中，完成后更新字典而不是数组：

   @State private var translatedTexts: [Int: String] = [:]
   
   // 翻译完成后调用
   self.translatedTexts[index] = translationResult
   

   对应显示时改为：if let translation = translatedTexts[index]

2. 添加加载状态：在翻译未完成时，可显示占位文本（如"翻译中..."）提升用户体验。

3. 占位图优化：将image ?? UIImage()替换为自定义占位图或提示文本，避免空白显示。

原代码问题解析 #

1. 重复缩放坐标：原代码中计算scale后，又将其应用到position的x/y值，导致坐标被二次缩放，这是文本堆叠在左上角的核心原因。
2. 索引越界风险：未处理translatedText数组长度小于recognizedText的情况，异步翻译时容易出现数组越界崩溃。
3. 坐标逻辑冗余：GeometryReader配合ZStack的默认对齐方式，可简化坐标计算，无需额外的alignmentGuide。

内容的提问来源于stack exchange，提问作者Hardy Wen