如何通过CGPoint设置SwiftUI ScrollView位置，实现双击缩放定位

要实现双击图片时缩放并将点击位置居中显示，核心是通过ScrollViewReader控制滚动偏移，同时计算点击位置在缩放后视图中的坐标关系。以下是修改后的完整实现：

import SwiftUI

struct ZoomableImageView: View {
    @State private var zoomScale: CGFloat = 1.0
    private let minZoomScale: CGFloat = 1.0
    private let maxZoomScale: CGFloat = 3.0
    var image: Image?
    
    var body: some View {
        GeometryReader { outerProxy in
            ScrollViewReader { scrollProxy in
                ScrollView([.vertical, .horizontal], showsIndicators: false) {
                    image?
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .id("zoomableImage") // 给图片添加唯一ID，用于ScrollViewReader定位
                        .onTapGesture(count: 2) { location in
                            // 切换缩放比例
                            let targetScale = zoomScale == minZoomScale ? maxZoomScale : minZoomScale
                            
                            // 计算点击位置相对于图片视图的坐标
                            let imageWidth = outerProxy.size.width * targetScale
                            let relativeX = location.x / outerProxy.size.width * imageWidth
                            let relativeY = location.y / outerProxy.size.height * imageWidth
                            
                            // 计算需要滚动的偏移比例，让点击位置居中
                            let anchorX = 0.5 + (relativeX - outerProxy.size.width/2)/imageWidth
                            let anchorY = 0.5 + (relativeY - outerProxy.size.height/2)/imageWidth
                            
                            // 执行缩放动画
                            withAnimation(.easeInOut) {
                                zoomScale = targetScale
                            }
                            
                            // 延迟滚动，确保缩放动画完成后视图尺寸稳定
                            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                                scrollProxy.scrollTo("zoomableImage", anchor: UnitPoint(x: anchorX, y: anchorY))
                            }
                        }
                        .gesture(
                            MagnificationGesture()
                                .onChanged { value in
                                    zoomScale = max(minZoomScale, min(maxZoomScale, value * zoomScale))
                                }
                        )
                        .frame(width: outerProxy.size.width * max(minZoomScale, zoomScale))
                        .frame(maxHeight: .infinity)
                }
            }
        }
    }
}

关键逻辑说明： #

• ScrollViewReader：直接控制ScrollView的滚动位置，通过图片绑定的唯一id实现精准定位。
• 相对坐标转换：把屏幕点击坐标转换成缩放后图片上的实际坐标，适配图片尺寸随缩放比例的变化。
• 锚点计算：通过点击位置与屏幕中心的差值，算出ScrollView滚动的锚点比例，让点击位置最终居中显示。
• 动画同步：缩放操作添加过渡动画，滚动延迟执行是为了等缩放完成后视图尺寸稳定，避免位置计算偏差。

注意事项： #

• 若修改图片的aspectRatio（比如改为.fill），需要同步调整相对坐标的计算逻辑。
• 可根据需求调整minZoomScale、maxZoomScale的数值，以及滚动延迟的时间。

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