iOS 雙擊放大圖片點擊位置 + 捏合縮放

首先帘不,感謝各位大神的文章作為參考逆趣,我只是在需要的時候做個整理箕母,增加了一個放大點擊位置計算偏移量的方法。

思路

view 里面添加 collectionView砾隅,每個 cell 里面添加一個 scrollView误阻,scrollView 再添加 imageView

ImageZoomView.swift

這個就是我們最關(guān)鍵的 view,使用和布局都在里面晴埂,還有封裝的 collectionView究反,但是估計沒人想看我們就省略了,后面見源碼儒洛。

ImageZoomCell.swift

圖片的縮放功能都裝在這個里面精耐。

核心的方法

lastScale:記錄用戶操作后當前的縮放比例,tapOffset:雙擊圖片放大點擊位置后晶丘,該位置偏移到中心點的偏移量(也就是 scrollView 的偏移量)

let maxScale: CGFloat = 3.0 // 最大縮放倍數(shù)

let minScale: CGFloat = 0.5 // 最小倍數(shù)

let scaleDuration = 0.38 // 縮放動畫時間

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

var tapOffset: CGPoint? // 雙擊放大偏移的 point

把手勢添加到 cell 上面黍氮,手勢分為單擊和雙擊手勢唐含,這里單擊手勢要放在圖片放大后添加浅浮,直接一起添加會造成沖突(第一次雙擊放大手勢會沒有響應(yīng)),用手勢代理方法處理沖突捷枯,會造成圖片單擊復原回調(diào)會有明顯延遲滚秩。

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)
    }

兩個手勢的回調(diào)

/** 單擊復原 */
    @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)
        // 根據(jù)點擊的位置計算偏移量
        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本股。

/** 設(shè)置縮放比例 */
    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 {

            // 內(nèi)邊距是針對 scrollView 捏合縮放,圖片居中設(shè)置的邊距
            scrollView.contentInset = UIEdgeInsets.zero // 內(nèi)邊距清空

            // 修改中心點
            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 的中心位置

/** 計算內(nèi)邊距 */
    fileprivate func calculateInset() {

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

        // 垂直內(nèi)邊距
        let paddingV = imgViewSize.height < scrollViewSize.height ? (scrollViewSize.height - imgViewSize.height) / 2 : 0

        // 水平內(nèi)邊距
        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 放大后的位置與顯示區(qū)域的 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 轉(zhuǎn)換 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)
    }

結(jié)語

文章中點擊放大參考了 StrivEver 的圖片瀏覽工具蟆盐,捏合縮放參考的文章已經(jīng)找不到了承边,后面找到會加上去的。

代碼在此石挂,各位大爺慢慢享用博助,喜歡就給個小星星

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市痹愚,隨后出現(xiàn)的幾起案子富岳,更是在濱河造成了極大的恐慌,老刑警劉巖拯腮,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件城瞎,死亡現(xiàn)場離奇詭異,居然都是意外死亡疾瓮,警方通過查閱死者的電腦和手機脖镀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來狼电,“玉大人蜒灰,你說我怎么就攤上這事〖绲” “怎么了强窖?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長削祈。 經(jīng)常有香客問我翅溺,道長,這世上最難降的妖魔是什么髓抑? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任咙崎,我火速辦了婚禮,結(jié)果婚禮上吨拍,老公的妹妹穿的比我還像新娘褪猛。我一直安慰自己,他們只是感情好羹饰,可當我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布伊滋。 她就那樣靜靜地躺著碳却,像睡著了一般。 火紅的嫁衣襯著肌膚如雪笑旺。 梳的紋絲不亂的頭發(fā)上昼浦,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天,我揣著相機與錄音筒主,去河邊找鬼座柱。 笑死,一個胖子當著我的面吹牛物舒,可吹牛的內(nèi)容都是我干的色洞。 我是一名探鬼主播,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼冠胯,長吁一口氣:“原來是場噩夢啊……” “哼火诸!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起荠察,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤置蜀,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后悉盆,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體盯荤,經(jīng)...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年焕盟,在試婚紗的時候發(fā)現(xiàn)自己被綠了秋秤。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡脚翘,死狀恐怖灼卢,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情来农,我是刑警寧澤鞋真,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站沃于,受9級特大地震影響涩咖,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜繁莹,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一檩互、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蒋困,春花似錦盾似、人聲如沸敬辣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至村刨,卻和暖如春告抄,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背嵌牺。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工打洼, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人逆粹。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓募疮,卻偏偏與公主長得像,于是被迫代替她去往敵國和親僻弹。 傳聞我的和親對象是個殘疾皇子阿浓,可洞房花燭夜當晚...
    茶點故事閱讀 42,802評論 2 345