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)
