vue 多点触控手势_vue手势解决方案

mounted() {this.getData();this.requireList = document.getElementsByClassName('required');

let swordEle= document.getElementsByClassName('swordPic')[0];

let bwidth, bheight, swidth, sheight;

Transform(swordEle);var initScale = 1;var af = newAlloyFinger(swordEle, {

touchStart:function() {

console.log('touchStart')

},

touchMove:function(evt) {

swordEle.style.translateX+=evt.deltaX;

swordEle.style.translateY+=evt.deltaY;

evt.preventDefault();

},

touchEnd:function() {

console.log('end')

console.log(swordEle.style.transform)

},

touchCancel:function() {

console.log('cancel')

},

multipointStart:function() {

initScale=swordEle.scaleX;

},

multipointEnd:function() {

},

tap:function() {

},

doubleTap:function() {

},

longTap:function() {

},

singleTap:function() {

},

rotate:function(evt) {

swordEle.rotateZ+=evt.angle;

},

pinch:function(evt) {

swordEle.scaleX= swordEle.scaleY = initScale *evt.scale;

},

pressMove:function(evt) {

let widthDiff= bwidth -swidth;

let heightDiff= bheight -sheight;

console.log('diff' + widthDiff + ' ' +heightDiff)

console.log('translateX:' + swordEle.translateX + '' +swordEle.translateY )if (((evt.deltaX>0)&&(swordEle.translateX >= widthDiff))||((evt.deltaY>0)&&(swordEle.translateY >= heightDiff))||((swordEle.translateX<0)&&((evt.deltaX<0)))||((swordEle.translateY<0)&&((evt.deltaY<0)))) {

console.log('越界')

}else{

swordEle.translateX+=evt.deltaX;

swordEle.translateY+=evt.deltaY;

}

console.log('pressmve:' +swordEle.translateX)

console.log('pressmve:' +swordEle.translateY)

},

swipe:function(evt) {//console.log("swipe" + evt.direction);

}

});

document.getElementById('coverPic').onload = function() {

bwidth= this.width;

bheight= this.height;

console.log(bwidth+ ' ' +bheight)if (document.body.scrollHeight - document.body.clientHeight > 20) {

document.body.scrollTop=document.body.scrollHeight;

}

}

document.getElementById('swordEle').onload = function() {

swidth= this.width;

sheight= this.height;

console.log(swidth+ ' ' +sheight)

}

},