iOS中实现UIScrollView触摸点区域裁剪并居中显示的问题求助

需求说明 #

开发绘图功能时，需要让用户清晰看到手指下方的绘制内容。图片承载于UIScrollView中，计划裁剪触摸点周围的区域，在屏幕顶部的独立“zoomer窗口”中放大显示，参考效果为Android示例GIF。

现有问题 #

当前实现的代码能接近效果，但存在两个核心问题：

• 触摸点无法始终保持在zoomer窗口中心
• UIScrollView缩放时，zoomer窗口的内容对齐偏差严重，调整缩放因子后仍无法解决

现有代码 #

UIGraphicsBeginImageContextWithOptions(CGSize(width: zoomerWindowWidth, height: zoomerWindowWidth), false, 0)
let cropRect = CGRect(
        x: -(lastPointTouched.x - zoomerWindowWidth / 2),
        y: -(lastPointTouched.y + zoomerWindowWidth / 2),
        width: view.bounds.size.width,
        height: view.bounds.size.height
)

mainScrollView.drawHierarchy(in: cropRect, afterScreenUpdates: true)
let image = UIGraphicsGetImageFromCurrentImageContext()
zoomerImageView.image = image

解决方案 #

问题根源在于未考虑UIScrollView的contentOffset和zoomScale，导致触摸点的坐标转换错误，缩放时比例不匹配。以下是修正后的完整实现：

// 可配置参数：zoomer窗口尺寸、放大倍数
let zoomerWindowWidth: CGFloat = 100 // 根据实际需求调整
let zoomFactor: CGFloat = 2.0 // 控制zoomer内内容的放大程度，值越大内容越清晰

// 1. 将触摸点转换为UIScrollView内容坐标系下的真实位置（抵消滚动和缩放的影响）
let contentTouchPoint = CGPoint(
    x: (lastPointTouched.x - mainScrollView.contentOffset.x) / mainScrollView.zoomScale,
    y: (lastPointTouched.y - mainScrollView.contentOffset.y) / mainScrollView.zoomScale
)

// 2. 计算原始内容中要裁剪的区域（以触摸点为中心，尺寸对应zoomer窗口除以放大倍数）
let sourceCropSize = CGSize(
    width: zoomerWindowWidth / zoomFactor,
    height: zoomerWindowWidth / zoomFactor
)
var sourceCropRect = CGRect(
    x: contentTouchPoint.x - sourceCropSize.width / 2,
    y: contentTouchPoint.y - sourceCropSize.height / 2,
    width: sourceCropSize.width,
    height: sourceCropSize.height
)

// 3. 修正裁剪区域，避免超出UIScrollView的内容边界，防止显示空白
sourceCropRect.origin.x = max(0, min(sourceCropRect.origin.x, mainScrollView.contentSize.width - sourceCropRect.width))
sourceCropRect.origin.y = max(0, min(sourceCropRect.origin.y, mainScrollView.contentSize.height - sourceCropRect.height))

// 4. 创建zoomer窗口大小的图像上下文
UIGraphicsBeginImageContextWithOptions(CGSize(width: zoomerWindowWidth, height: zoomerWindowWidth), false, UIScreen.main.scale)

// 5. 计算绘制时的矩形：将原始内容区域放大zoomFactor倍，确保触摸点居中
let drawRect = CGRect(
    x: -sourceCropRect.origin.x * zoomFactor,
    y: -sourceCropRect.origin.y * zoomFactor,
    width: mainScrollView.contentSize.width * zoomFactor,
    height: mainScrollView.contentSize.height * zoomFactor
)

// 6. 绘制UIScrollView内容到上下文
mainScrollView.drawHierarchy(in: drawRect, afterScreenUpdates: true)

// 7. 获取图像并赋值给zoomer视图
if let zoomedImage = UIGraphicsGetImageFromCurrentImageContext() {
    zoomerImageView.image = zoomedImage
}
UIGraphicsEndImageContext()

关键修正点 #

• 坐标转换：将触摸点从UIScrollView的frame坐标系转换为内容坐标系，抵消滚动偏移和缩放比例的影响
• 裁剪区域计算：以转换后的真实触摸点为中心，结合放大倍数计算原始裁剪区域，确保zoomer窗口内容的对应关系
• 边界处理：修正裁剪区域的位置，避免超出内容范围导致空白
• 缩放匹配：绘制时将内容按放大倍数缩放，保证zoomer窗口内的显示比例正确

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