如何在不同尺寸iOS设备上精准映射篮球场地点击坐标？

问题描述 #

我正在开发一款面向篮球队的投篮图表APP，应用内有篮球场地图片，用户点击场地时会显示一个圆点，获取点击坐标并渲染圆点的逻辑很简单。但遇到的核心问题是：需要在不同设备上精准还原记录设备上的点击位置——比如在iPhone SE上记录的罚球线位置，要在iPad、iPhone 14 Pro Max等设备上显示在完全相同的场地位置。尝试将x/y坐标转换为基于图片尺寸的比例，但因设备屏幕比例不同而无效。

测试情况与代码 #

视图控制器代码 #

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 添加手势识别器
    let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(imageTapped(tapGestureRecognizer:)))
    imageView.isUserInteractionEnabled = true
    imageView.addGestureRecognizer(tapGestureRecognizer)
    
    // 第一次运行时注释，获取比例后取消注释测试
//    let dotImage = UIImageView(image: UIImage(named: "playDot"))
//    dotImage.frame.origin = CGPoint(x: self.imageView.frame.size.width * 0.5007496251874063, y: self.imageView.frame.size.height * 0.20666666666666667)
//    self.imageView.addSubview(dotImage)
}

@objc func imageTapped(tapGestureRecognizer: UITapGestureRecognizer) {
    let touchPoint = tapGestureRecognizer.location(in: self.imageView)
    
    let dotImage = UIImageView(image: UIImage(named: "playDot"))
    dotImage.center = touchPoint
    self.imageView.addSubview(dotImage)
    
    print("Tap dot x%:\(touchPoint.x / self.imageView.frame.size.width), y%: \(touchPoint.y / self.imageView.frame.size.height)")
}

测试结果 #

1. 首次点击后圆点显示：
   
   控制台输出：

Tap dot x%:0.5007496251874063, y%: 0.20666666666666667

2. 取消注释还原代码重新运行后，同一模拟器上的显示：
   

目前同一设备上都无法实现位置精准还原，更不用说多设备同步。

问题根源 #

1. 坐标基准不统一：记录比例时用点击点相对于imageView的坐标，还原时却设置dotImage.frame.origin，但添加圆点时用的是dotImage.center = touchPoint——前者是视图左上角基准，后者是视图中心点基准，两者计算逻辑不一致。
2. 忽略图片内容模式：imageView的contentMode会影响图片的缩放和偏移，直接用imageView的尺寸计算比例，会因图片和视图比例不匹配导致坐标偏差。

解决方案 #

1. 统一坐标逻辑，基于图片原始尺寸计算比例 #

不管记录还是还原，都以篮球场地图片的原始像素尺寸为基准计算比例，再转换为当前imageView中的坐标，同时统一用中心点设置圆点位置：

// 记录点击位置的方法
@objc func imageTapped(tapGestureRecognizer: UITapGestureRecognizer) {
    guard let image = imageView.image else { return }
    
    // 获取点击点在imageView中的位置
    let touchPointInView = tapGestureRecognizer.location(in: imageView)
    // 转换为图片原始像素坐标
    let touchPointInImage = convertPointToImageCoordinates(touchPointInView, imageView: imageView)
    
    // 计算相对于图片尺寸的比例
    let xRatio = touchPointInImage.x / image.size.width
    let yRatio = touchPointInImage.y / image.size.height
    
    print("Tap dot x%:\(xRatio), y%: \(yRatio)")
    
    // 添加圆点
    let dotImage = UIImageView(image: UIImage(named: "playDot"))
    dotImage.center = touchPointInView
    imageView.addSubview(dotImage)
}

// 还原位置的方法
func restoreDot(atXRatio xRatio: CGFloat, yRatio: CGFloat) {
    guard let image = imageView.image else { return }
    
    // 计算图片原始坐标
    let imageX = image.size.width * xRatio
    let imageY = image.size.height * yRatio
    // 转换为当前imageView中的坐标
    let pointInView = convertPointFromImageCoordinates(CGPoint(x: imageX, y: imageY), imageView: imageView)
    
    let dotImage = UIImageView(image: UIImage(named: "playDot"))
    dotImage.center = pointInView
    imageView.addSubview(dotImage)
}

2. 实现坐标转换工具函数 #

这个函数会处理imageView的contentMode，确保坐标转换不受设备屏幕比例影响：

// 将imageView中的点转换为图片原始坐标
func convertPointToImageCoordinates(_ point: CGPoint, imageView: UIImageView) -> CGPoint {
    guard let image = imageView.image else { return .zero }
    
    let imageSize = image.size
    let viewSize = imageView.bounds.size
    
    var scale: CGFloat = 1.0
    var xOffset: CGFloat = 0.0
    var yOffset: CGFloat = 0.0
    
    switch imageView.contentMode {
    case .scaleAspectFit:
        let widthScale = viewSize.width / imageSize.width
        let heightScale = viewSize.height / imageSize.height
        scale = min(widthScale, heightScale)
        
        xOffset = (viewSize.width - imageSize.width * scale) / 2.0
        yOffset = (viewSize.height - imageSize.height * scale) / 2.0
    case .scaleAspectFill:
        let widthScale = viewSize.width / imageSize.width
        let heightScale = viewSize.height / imageSize.height
        scale = max(widthScale, heightScale)
        
        xOffset = (viewSize.width - imageSize.width * scale) / 2.0
        yOffset = (viewSize.height - imageSize.height * scale) / 2.0
    case .center:
        xOffset = (viewSize.width - imageSize.width) / 2.0
        yOffset = (viewSize.height - imageSize.height) / 2.0
    case .top, .bottom:
        xOffset = (viewSize.width - imageSize.width) / 2.0
    case .left, .right:
        yOffset = (viewSize.height - imageSize.height) / 2.0
    default:
        break
    }
    
    let adjustedX = (point.x - xOffset) / scale
    let adjustedY = (point.y - yOffset) / scale
    
    return CGPoint(x: adjustedX, y: adjustedY)
}

// 将图片原始坐标转换为imageView中的点
func convertPointFromImageCoordinates(_ point: CGPoint, imageView: UIImageView) -> CGPoint {
    guard let image = imageView.image else { return .zero }
    
    let imageSize = image.size
    let viewSize = imageView.bounds.size
    
    var scale: CGFloat = 1.0
    var xOffset: CGFloat = 0.0
    var yOffset: CGFloat = 0.0
    
    switch imageView.contentMode {
    case .scaleAspectFit:
        let widthScale = viewSize.width / imageSize.width
        let heightScale = viewSize.height / imageSize.height
        scale = min(widthScale, heightScale)
        
        xOffset = (viewSize.width - imageSize.width * scale) / 2.0
        yOffset = (viewSize.height - imageSize.height * scale) / 2.0
    case .scaleAspectFill:
        let widthScale = viewSize.width / imageSize.width
        let heightScale = viewSize.height / imageSize.height
        scale = max(widthScale, heightScale)
        
        xOffset = (viewSize.width - imageSize.width * scale) / 2.0
        yOffset = (viewSize.height - imageSize.height * scale) / 2.0
    case .center:
        xOffset = (viewSize.width - imageSize.width) / 2.0
        yOffset = (viewSize.height - imageSize.height) / 2.0
    case .top, .bottom:
        xOffset = (viewSize.width - imageSize.width) / 2.0
    case .left, .right:
        yOffset = (viewSize.height - imageSize.height) / 2.0
    default:
        break
    }
    
    let adjustedX = point.x * scale + xOffset
    let adjustedY = point.y * scale + yOffset
    
    return CGPoint(x: adjustedX, y: adjustedY)
}

3. 固定imageView的内容模式 #

推荐使用.scaleAspectFit或.scaleAspectFill，确保图片在不同设备上保持比例：

imageView.contentMode = .scaleAspectFit
imageView.clipsToBounds = true

验证方法 #

1. 点击记录比例后，调用restoreDot(atXRatio: xRatio, yRatio: yRatio)，同一设备上圆点位置应与点击位置完全重合。
2. 在不同设备上测试，还原的圆点会精准对应篮球场地的同一位置。

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