AlloyFinger添加缩放手势

coding.gif

zoom.js

import AlloyFinger from 'alloyfinger'

export default function addAlloyFinger(el) {
  el.setAttribute('style', 'transform-origin: 50% 50%;')

  let cacheX = 0
  let cacheY = 0
  let currentScale = 1.0
  const alloy = new AlloyFinger(el, {
    pinch: function(evt) {
      evt.stopPropagation()
      if (evt.zoom > 0.5 && evt.zoom < 2.0) {
        currentScale = evt.zoom
        el.style.transform = `scale(${currentScale})`
      }
      console.log('scale---', evt.zoom, ' ', currentScale)
    },
    pressMove: function(evt) {
      evt.stopPropagation()
      if (currentScale <= 1) {
        return
      }
      console.log('pressmove', evt.deltaX, currentScale)
      cacheX += evt.deltaX / currentScale
      cacheY += evt.deltaY / currentScale

      const absX = Math.abs(cacheX)
      const absY = Math.abs(cacheY)

      if (absX > 300 || absY > 300) {
        cacheX = (cacheX > 0 ? +1 : -1) * Math.min(absX, 300)
        cacheY = (cacheY > 0 ? +1 : -1) * Math.min(absY, 300)
      }
      el.style.transform = `translate(${cacheX}px, ${cacheY}px) scale(${currentScale})`
    },
    doubleTap: function(evt) {
      evt.stopPropagation()
      currentScale = 1.0
      cacheX = 0
      cacheY = 0
      el.style.transform = `translate(${cacheX}px, ${cacheY}px) scale(${currentScale})`
    },
    multipointEnd: function() {
    }
  })

  return alloy
}

调用：

import addAlloyFinger from '@/utils/zoom.js'

// 以iframe为例
const el = this.$refs['iframeRef'].contentWindow.document.body.querySelector('#viewerContainer')

addAlloyFinger(el)