uniapp nvue中俩个手指按下,每次只会监听到一个
uniapp 中双指缩放,touch.scale 为当前的缩放比例
<template> <view @touchstart.stop="move" @touchmove.stop="moving" > {{ touch.scale }} </view> </template> <script> export default { data() { return { touch: { distanceScale: 1000, //移动500px变化100% scaleMax: 99, //最大缩放 scaleMin: 1, //最小缩放 scale: 1, //当前缩放 scalestart: 1, //刚开始缩放的比例 isMove: false, distance: 0, //俩个手指之间的距离 startOne: { screenX: 0, screenY: 0 }, //第一个手指 startTwo: { screenX: 0, screenY: 0 } //第二个手指 } }; }, methods: { move(e) { let touches = e.changedTouches[0]; // 第一根手指 if (touches.identifier == 0) { this.touch.startOne.screenX = touches.screenX; this.touch.startOne.screenY = touches.screenY; } if (touches.identifier == 1) { this.touch.startTwo.screenX = touches.screenX; this.touch.startTwo.screenY = touches.screenY; } this.touch.isMove = this.touch.startOne.screenX && this.touch.startTwo.screenX; if (this.touch.isMove) { let xMove = this.touch.startOne.screenX - this.touch.startTwo.screenX; let yMove = this.touch.startOne.screenY - this.touch.startTwo.screenY; this.touch.distance = Math.sqrt(xMove * xMove + yMove * yMove); this.touch.scalestart = this.touch.scale; } }, // 移动中 moving(e) { if (!this.touch.isMove) return; let touches = e.changedTouches[0]; // 第一根手指 if (touches.identifier == 0) { this.touch.startOne.screenX = touches.screenX; this.touch.startOne.screenY = touches.screenY; } if (touches.identifier == 1) { this.touch.startTwo.screenX = touches.screenX; this.touch.startTwo.screenY = touches.screenY; } let xMove = this.touch.startOne.screenX - this.touch.startTwo.screenX; let yMove = this.touch.startOne.screenY - this.touch.startTwo.screenY; //双手指运动新的 ditance let distance = Math.sqrt(xMove * xMove + yMove * yMove); //计算移动的过程中实际移动了多少的距离 let distanceDiff = distance - this.touch.distance; let newScale = this.touch.scalestart + (distanceDiff / this.touch.distanceScale) * (this.touch.scaleMax - this.touch.scaleMin); if (newScale < this.touch.scaleMin) { this.touch.scale = this.touch.scaleMin; } else if (newScale > this.touch.scaleMax) { this.touch.scale = this.touch.scaleMax; } else { this.touch.scale = Math.floor(newScale); } this.context.setCameraZoomRatio(this.touch.scale); }, // 手指抬起 moved(e) { let touches = e.changedTouches[0]; if (touches.identifier == 0) { this.touch.startOne.screenX = 0; this.touch.startOne.screenY = 0; } if (touches.identifier == 1) { this.touch.startTwo.screenX = 0; this.touch.startTwo.screenY = 0; } this.touch.isMove = this.touch.startOne.screenX && this.touch.startTwo.screenX; }, } }; </script> <style> </style>
标签:uniapp,nvue,缩放,startOne,startTwo,touches,touch,screenY,screenX From: https://www.cnblogs.com/symlove/p/17904073.html