vue 缩放与移动(放大缩小“简单”动画)
需要进行缩放与移动的div<div ref="chmap" style="transform:scale(1)" @touchstart="touchstart($event)" @touchmove="touchmove($event)" @touchend="touchend($event)">、、内容</div>手势操作开始,手指触摸到屏幕// 手势操作开始touch
·
需要进行缩放与移动的div
<div ref="chmap" style="transform:scale(1)" @touchstart="touchstart($event)" @touchmove="touchmove($event)" @touchend="touchend($event)">
、、内容
</div>
- 手势操作开始,手指触摸到屏幕
// 手势操作开始
touchstart(e) {
this.pageX = e.targetTouches[0].pageX; // 获取手指点的x坐标
this.pageY = e.targetTouches[0].pageY; // 获取手指点的Y坐标
this.initX = this.$refs.chmap.offsetLeft; // 获取div的left
this.initY = this.$refs.chmap.offsetTop; // 获取div的top
if (e.touches.length >= 2) { //判断是否有两个点在屏幕上
this.start = e.touches; //得到第一组两个点
};
this.isTouch = true; // 开启手指操作
},
- 手指移动中,判断是缩放还是拖动
// 手势操作中
touchmove(e) {
let self = this;
let chmapScale = this.$refs.chmap.style.transform.slice(6,-1) // 获取scale值
e.preventDefault(); // 取消事件的默认动作。
// 移动操作
if (e.touches.length == 1 && this.isTouch) {
let touchMoveX = e.targetTouches[0].pageX // 移动后的left值
let touchMoveY = e.targetTouches[0].pageY; // 移动后的top值
// 移动后的left值 - 移动前的left值 = 移动的距离
// 移动的距离 + div左边距 = 拖放后的位置
this.$refs.chmap.style.left = parseInt(touchMoveX) - parseInt(this.pageX) + parseInt(this.initX) + "px";
this.$refs.chmap.style.top = parseInt(touchMoveY) - parseInt(this.pageY) + parseInt(this.initY) + "px";
};
// 放大操作 两个点以上,为了不无限放大造成负担,最大2.4倍
if (e.touches.length == 1 && self.isTouch && chmapScale < 2.4 ) {
var now = e.touches; // 获取手指点的参数
let scale = (self.getDistance(now[0], now[1]) / self.getDistance(self.start[0], self.start[1])); // 调用算法算出偏移量
// 最大值
if(scale > 1.1) {
this.visible = false;
scale = 2
// 下面是放大动画,因为不复杂,用定时简单写了
this.isTouch = false;
setTimeout(()=>{ self.$refs.chmap.style.transform = "scale(" + 1.2 + ")"; },50)
setTimeout(()=>{ self.$refs.chmap.style.transform = "scale(" + 1.4 + ")"; },100)
setTimeout(()=>{ self.$refs.chmap.style.transform = "scale(" + 1.6 + ")"; },140)
setTimeout(()=>{ self.$refs.chmap.style.transform = "scale(" + 1.8 + ")"; },180)
setTimeout(()=>{ self.$refs.chmap.style.transform = "scale(" + 2 + ")"; },220)
}
// 最小值
if(scale < 1) {
this.visible = true;
// 缩放后回归原位
this.$refs.chmap.style.left = 0 + "px";
this.$refs.chmap.style.top = '38.5vh';
scale = 1
// 下面是放大动画,因为不复杂,用定时简单写了
this.isTouch = false;
setTimeout(()=>{ self.$refs.chmap.style.transform = "scale(" + 1.8 + ")"; },50)
setTimeout(()=>{ self.$refs.chmap.style.transform = "scale(" + 1.6 + ")"; },100)
setTimeout(()=>{ self.$refs.chmap.style.transform = "scale(" + 1.4 + ")"; },140)
setTimeout(()=>{ self.$refs.chmap.style.transform = "scale(" + 1.2 + ")"; },180)
setTimeout(()=>{ self.$refs.chmap.style.transform = "scale(" + 1 + ")"; },220)
}
};
},
- 结束操作,关闭,避免误触发
// 手势操作结束
touchend(e) {
if (this.isTouch) {
this.isTouch = false;
}
},
- 算法(重点)
// 算出数值,勾股定理方法
getDistance(p1, p2) {
var x = p2.pageX - p1.pageX
var y = p2.pageY - p1.pageY;
return Math.sqrt((x * x) + (y * y));
},
注:缺点是没法从3倍到0.5倍,会默认把3倍变成1倍再缩小成0.5倍。(因个人用不到,先不细究)
参考(已赞):https://blog.csdn.net/qq_42014697/article/details/80728463
更多推荐
已为社区贡献4条内容
所有评论(0)