SwiftUI中在图片指定坐标添加多段文本的实现问题

核心问题是直接用offset(x:y:)的坐标是相对于ZStack父容器，而非图片本身的实际显示区域。要实现文本相对于图片的精准定位，需要基于图片的实际显示尺寸来计算坐标，而非固定数值。

实现步骤 #

1. 获取Kingfisher加载图片的原始尺寸，结合容器尺寸计算图片的实际显示区域
2. 用相对比例坐标（比如x占图片宽度的比例、y占图片高度的比例）定义文本位置，适配不同尺寸的图片和容器
3. 通过GeometryReader获取容器尺寸，动态计算文本的绝对位置

完整代码示例 #

import SwiftUI
import Kingfisher

// 统一管理文本配置：内容、字体大小、相对于图片的坐标比例（0-1范围）
struct TextOverlayConfig {
    let text: String
    let fontSize: CGFloat
    let xRatio: CGFloat // 0=图片左边缘，1=图片右边缘
    let yRatio: CGFloat // 0=图片上边缘，1=图片下边缘
}

struct ImageWithTextOverlay: View {
    let imageURL: URL
    let textOverlays: [TextOverlayConfig]
    
    // 存储加载成功的图片原始尺寸
    @State private var imageSize: CGSize = .zero
    
    var body: some View {
        GeometryReader { containerGeo in
            ZStack(alignment: .topLeading) {
                // 加载图片并获取原始尺寸
                KFImage(imageURL)
                    .onSuccess { result in
                        imageSize = result.image.size
                    }
                    .resizable()
                    .scaledToFit()
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                
                // 批量添加文本层
                ForEach(textOverlays.indices, id: \.self) { index in
                    let config = textOverlays[index]
                    Text(config.text)
                        .font(.system(size: config.fontSize))
                        .foregroundColor(.white)
                        .shadow(color: .black, radius: 2)
                        .position(
                            x: calculateXPosition(in: containerGeo.size, config: config),
                            y: calculateYPosition(in: containerGeo.size, config: config)
                        )
                }
            }
        }
    }
    
    // 计算文本X坐标：基于图片显示宽度的比例
    private func calculateXPosition(in containerSize: CGSize, config: TextOverlayConfig) -> CGFloat {
        guard imageSize != .zero else { return 0 }
        let scale = min(containerSize.width / imageSize.width, containerSize.height / imageSize.height)
        let displayedImageWidth = imageSize.width * scale
        // 容器内图片的左边缘 + 图片宽度的比例位置
        return (containerSize.width - displayedImageWidth)/2 + displayedImageWidth * config.xRatio
    }
    
    // 计算文本Y坐标：基于图片显示高度的比例
    private func calculateYPosition(in containerSize: CGSize, config: TextOverlayConfig) -> CGFloat {
        guard imageSize != .zero else { return 0 }
        let scale = min(containerSize.width / imageSize.width, containerSize.height / imageSize.height)
        let displayedImageHeight = imageSize.height * scale
        // 容器内图片的上边缘 + 图片高度的比例位置
        return (containerSize.height - displayedImageHeight)/2 + displayedImageHeight * config.yRatio
    }
}

// 使用示例
struct ContentView: View {
    let testImageURL = URL(string: "https://example.com/your-image.jpg")!
    let textConfigs = [
        TextOverlayConfig(text: "顶部标题", fontSize: 24, xRatio: 0.5, yRatio: 0.1),
        TextOverlayConfig(text: "右下角标注", fontSize: 16, xRatio: 0.9, yRatio: 0.9)
    ]
    
    var body: some View {
        ImageWithTextOverlay(imageURL: testImageURL, textOverlays: textConfigs)
            .frame(width: 300, height: 300)
    }
}

关键说明 #

• 用TextOverlayConfig统一管理文本属性，后续修改或新增文本更便捷
• 通过onSuccess获取图片原始尺寸，结合容器尺寸计算显示比例，确保文本位置始终绑定图片本身
• 用position替代offset，直接基于容器坐标系计算精准位置，避免嵌套视图的偏移干扰

内容的提问来源于stack exchange，提问作者Shohan Pramanik