iOS SwiftUI技术实现：如何像谷歌地图一样在图片上放置标记

问题概述 #

将Android项目的图片标记功能移植到SwiftUI时，遇到两个核心问题：

• 点击图片后标记无法显示在正确位置
• 无法实现跨Android和iOS设备的标记位置精准同步

核心逻辑参考（Android端翻译） #

Android端实现的核心是基于图片原始尺寸的相对坐标计算：

1. 获取图片原始宽高（非控件显示尺寸）
2. 计算控件显示时的缩放比例与偏移量（适配图片居中、拉伸等显示模式）
3. 将点击的控件坐标转换为相对原始图片的比例值（范围0-1）
4. 存储比例值而非绝对像素，显示时根据当前控件尺寸反向计算绝对位置

SwiftUI解决方案 #

一、修复点击位置偏差 #

当前代码直接使用DragGesture的local坐标，但KFImage的显示可能存在缩放、偏移，导致坐标不匹配。需通过以下步骤修正：

1. 用GeometryReader获取图片容器和实际显示区域的尺寸
2. 将点击坐标转换为图片显示区域内的相对位置
3. 基于图片原始尺寸计算比例坐标

二、跨平台坐标同步 #

和Android端逻辑统一，存储相对原始图片的比例坐标（0-1范围）：

• 点击时：计算点击位置相对原始图片的X/Y比例
• 存储时：保存比例值，而非绝对像素
• 显示时：根据当前图片显示尺寸，用比例值计算绝对位置，保证跨平台一致

修改后的代码实现 #

import SwiftUI
import Kingfisher

struct ImageView: View {
    @StateObject var viewModel = ViewModel()
    let index: Int
    @State var showSheet: Bool = false
    @State var currentAnnotationSelected: SelectedAnnotationModel?
    @State var note: String = ""
    // 相对原始图片的比例坐标（0-1）
    @State var relativeX: CGFloat = 0
    @State var relativeY: CGFloat = 0
    // 图片原始尺寸
    @State var imageOriginalSize: CGSize = .zero
    // 图片实际显示的Frame（含偏移）
    @State var imageDisplayFrame: CGRect = .zero
    
    var body: some View {
        GeometryReader { containerGeo in
            VStack {
                KFImage.url(URL(string: viewModel.uri ?? ""))
                    .placeholder { ProgressView() }
                    .loadDiskFileSynchronously()
                    .cacheMemoryOnly()
                    .onSuccess { result in
                        // 获取图片原始尺寸
                        imageOriginalSize = result.image.size
                    }
                    .overlay(
                        // 获取图片实际显示的区域Frame
                        GeometryReader { imageGeo in
                            Color.clear.onAppear {
                                imageDisplayFrame = imageGeo.frame(in: .local)
                            }
                        }
                    )
                    .gesture(DragGesture(minimumDistance: 0, coordinateSpace: .local).onEnded { drag in
                        // 转换点击坐标到图片显示区域内的相对位置
                        let clickInImageX = drag.location.x - imageDisplayFrame.minX
                        let clickInImageY = drag.location.y - imageDisplayFrame.minY
                        
                        // 计算相对原始图片的比例坐标
                        relativeX = clickInImageX / imageDisplayFrame.width
                        relativeY = clickInImageY / imageDisplayFrame.height
                        
                        showSheet = true
                    })
            }
        }
        .sheet(isPresented: $showSheet) {
            AnnotationNote(relativeX: relativeX, relativeY: relativeY)
        }
        .overlay {
            GeometryReader { _ in
                if let annotations = viewModel.annotations, !annotations.isEmpty {
                    ForEach(Array(annotations.enumerated()), id: \.offset) { index, annotation in
                        Circle()
                            .frame(width: 15, height: 15)
                            .position(
                                x: imageDisplayFrame.minX + (imageDisplayFrame.width * annotation.relativeX),
                                y: imageDisplayFrame.minY + (imageDisplayFrame.height * annotation.relativeY)
                            )
                            .onTapGesture {
                                currentAnnotationSelected = SelectedAnnotationModel(index: index, details: annotation)
                                showSheet = true
                            }
                    }
                }
            }
        }
    }
}

// 数据模型示例
class ViewModel: ObservableObject {
    @Published var uri: String? = ""
    @Published var annotations: [AnnotationModel]? = []
}

struct AnnotationModel: Identifiable {
    let id = UUID()
    let relativeX: CGFloat // 相对原始图片X比例（0-1）
    let relativeY: CGFloat // 相对原始图片Y比例（0-1）
    let note: String
}

struct SelectedAnnotationModel {
    let index: Int
    let details: AnnotationModel
}

struct AnnotationNote: View {
    let relativeX: CGFloat
    let relativeY: CGFloat
    @State var note: String = ""
    
    var body: some View {
        VStack(spacing: 16) {
            TextField("添加备注", text: $note)
                .textFieldStyle(.roundedBorder)
            Button("保存标记") {
                // 保存比例坐标到ViewModel
                let newAnnotation = AnnotationModel(relativeX: relativeX, relativeY: relativeY, note: note)
                viewModel.annotations?.append(newAnnotation)
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

关键说明 #

• 坐标转换：通过GeometryReader获取图片显示区域的偏移和尺寸，将点击坐标修正为图片内部的相对位置
• 跨平台同步：存储相对原始图片的比例值，而非绝对像素，Android和iOS端基于相同逻辑计算，保证标记位置完全一致
• Kingfisher适配：使用onSuccess回调获取图片原始尺寸，确保比例计算准确

内容的提问来源于stack exchange，提问作者730wavy