首先，感谢各位大神的文章作为参考，我只是在需要的时候做个整理，增加了一个放大点击位置计算偏移量的方法。
思路
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 的图片浏览工具，捏合缩放参考的文章已经找不到了，后面找到会加上去的。
代码在此，各位大爷慢慢享用，喜欢就给个小星星
网友评论