iOS 双击放大图片点击位置 + 捏合缩放

首先，感谢各位大神的文章作为参考，我只是在需要的时候做个整理，增加了一个放大点击位置计算偏移量的方法。

思路

view 里面添加 collectionView，每个 cell 里面添加一个 scrollView，scrollView 再添加 imageView

ImageZoomView.swift

这个就是我们最关键的 view，使用和布局都在里面，还有封装的 collectionView，但是估计没人想看我们就省略了，后面见源码。

ImageZoomCell.swift

图片的缩放功能都装在这个里面。

核心的方法

lastScale：记录用户操作后当前的缩放比例，tapOffset：双击图片放大点击位置后，该位置偏移到中心点的偏移量（也就是 scrollView 的偏移量）

let maxScale: CGFloat = 3.0 // 最大缩放倍数

let minScale: CGFloat = 0.5 // 最小倍数

let scaleDuration = 0.38 // 缩放动画时间

var lastScale: CGFloat = 1.0 // 最后一次的缩放比例

var tapOffset: CGPoint? // 双击放大偏移的 point

把手势添加到 cell 上面，手势分为单击和双击手势，这里单击手势要放在图片放大后添加，直接一起添加会造成冲突（第一次双击放大手势会没有响应），用手势代理方法处理冲突，会造成图片单击复原回调会有明显延迟。

func setupUI() {
//        let singleTap = UITapGestureRecognizer.init(target: self, action: #selector(singleTap(tap:)))
//        addGestureRecognizer(singleTap)

        let doubleTap = UITapGestureRecognizer.init(target: self, action: #selector(doubleTap(tap:)))
        doubleTap.numberOfTapsRequired = 2
        addGestureRecognizer(doubleTap)
        contentView.addSubview(scrollView)
    }

两个手势的回调

/** 单击复原 */
    @objc func singleTap(tap: UITapGestureRecognizer) {
        UIView.animate(withDuration: scaleDuration) {
            self.setZoom(scale: 1.0)
        }
    }

    /** 双击放大 */
    @objc func doubleTap(tap: UITapGestureRecognizer) {
        // 获取点击的位置
        let point = tap.location(in: self)
        // 根据点击的位置计算偏移量
        calculateOffset(tapPoint: point)

        if lastScale > 1 {
            lastScale = 1
        } else {
            lastScale = maxScale
            // 单击手势放在这里
            let singleTap = UITapGestureRecognizer.init(target: self, action: #selector(singleTap(tap:)))
            addGestureRecognizer(singleTap)
        }
        UIView.animate(withDuration: scaleDuration) {
            self.setZoom(scale: self.lastScale)
        }
    }

这个方法很简单，主要控制图片的放大缩小、scrollView 的 contentSize 和 contentOffset、imageView 的 center。

/** 设置缩放比例 */
    fileprivate func setZoom(scale: CGFloat) {

        // 缩放比例限制（在最大最小中间）
        lastScale = max(min(scale, maxScale), minScale)

        imgView.transform = CGAffineTransform.init(scaleX: lastScale, y: lastScale)

        let imageW = imgView.frame.size.width
        let imageH = imgView.frame.size.height

        if lastScale > 1 {

            // 内边距是针对 scrollView 捏合缩放，图片居中设置的边距
            scrollView.contentInset = UIEdgeInsets.zero // 内边距清空

            // 修改中心点
            imgView.center = CGPoint.init(x: imageW / 2, y: imageH / 2)
            scrollView.contentSize = CGSize.init(width: imageW, height: imageH)

            if let offset = tapOffset {
                scrollView.contentOffset = offset
            }
        } else {
            calculateInset()
            scrollView.contentSize = CGSize.zero
        }
    }

图片按最短的边等比例缩放

var image: UIImage? {
        didSet {
            // 以最短的边等比例缩小图片
            let imgSize = (image?.size)!
            let scrollViewSize = scrollView.bounds.size

            let widthScale = scrollViewSize.width / imgSize.width
            let heightScale = scrollViewSize.height / imgSize.height

            let minScale = min(widthScale, heightScale)
            scrollView.minimumZoomScale = 1
            imgView.bounds = CGRect.init(x: 0, y: 0, width: imgSize.width * minScale, height: imgSize.height * minScale)

            imgView.image = image
        }
    }

这个方法是为了把缩放后的图片放在当前 cell 的中心位置

/** 计算内边距 */
    fileprivate func calculateInset() {

        let imgViewSize = imgView.frame.size
        let scrollViewSize = scrollView.bounds.size

        // 垂直内边距
        let paddingV = imgViewSize.height < scrollViewSize.height ? (scrollViewSize.height - imgViewSize.height) / 2 : 0

        // 水平内边距
        let paddingH = imgViewSize.width < scrollViewSize.width ? (scrollViewSize.width - imgViewSize.width) / 2 : 0

        scrollView.contentInset = UIEdgeInsets.init(top: paddingV, left: paddingH, bottom: paddingV, right: 0)
        imgView.center = CGPoint.init(x: imgViewSize.width / 2, y: imgViewSize.height / 2)

    }

偏移量的计算

当我们双击这个图片，图片是从原点的位置，向x，y轴的方向放大，我们只需要计算点击的 point 放大后的位置与显示区域的 center 的差值，然后再限制这个差值的范围。

/** 计算双击放大偏移量 */
    fileprivate func calculateOffset(tapPoint: CGPoint) {

        let viewSize = self.bounds.size
        let imgViewSize = imgView.bounds.size

        // 计算最大偏移 x y
        let maxOffsetX = imgViewSize.width * maxScale - viewSize.width
        let maxOffsetY = imgViewSize.height * maxScale - viewSize.height

        var tapX: CGFloat = tapPoint.x
        var tapY: CGFloat = tapPoint.y

        if imgViewSize.width == viewSize.width {
            // 将 tap superview 的 point 转换 tap 到 imageView 上的距离
            tapY = tapPoint.y - (viewSize.height - imgViewSize.height) / 2
        } else {
            tapX = tapPoint.x - (viewSize.width - imgViewSize.width) / 2
        }

        // 计算偏移量
        let offsetX = (tapX * maxScale - (self.superview?.center.x)!)
        let offsetY = (tapY * maxScale - (self.superview?.center.y)!)

        // 判断偏移量是否超出限制（0, maxOffset）
        let x = min(max(offsetX, 0), maxOffsetX)
        let y = min(max(offsetY, 0), maxOffsetY)
        tapOffset = CGPoint.init(x: x, y: y)
    }

结语

文章中点击放大参考了 StrivEver 的图片浏览工具，捏合缩放参考的文章已经找不到了，后面找到会加上去的。

代码在此，各位大爷慢慢享用，喜欢就给个小星星