爬过不少坑 , 总结下 基于 原生 JavaScript touch 事件 实现 移动端 缩放 位移
下面 有 在 Vue 项目中的实现方法 仅供参考
闲话少叙 看代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>gesture</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#app {
position: absolute;
bottom: 0px;
left: 0px;
border: 2px solid red;
width: 700px;
height: 500px;
overflow: hidden;
}
.box {
touch-action: none;
position: absolute;
background: green;
border: 1px solid black;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<!--下面 class="box" 的元素 可以替换为 pdf 文件 或者 图片...>
<!-- <embed src="pdf地址" type="application/pdf" internalinstanceid="4" class="box"> -->
<div class="box"></div>
<!-- <img src="1.png" alt="" class="box"> -->
</div>
<script>
var pageX, pageY, initX, initY, isTouch = false;
var start = [];
document.addEventListener("touchstart", function (e) {
//手指按下时的手指所在的X，Y坐标
pageX = e.targetTouches[0].pageX;
pageY = e.targetTouches[0].pageY;
//初始位置的X，Y 坐标
initX = e.target.offsetLeft;
initY = e.target.offsetTop;
//记录初始 一组数据 作为缩放使用
if (e.touches.length >= 2) { //判断是否有两个点在屏幕上
start = e.touches; //得到第一组两个点
};
//表示手指已按下
isTouch = true;
}, false);
//监听 touchmove 事件 手指 移动时 做的事情
document.addEventListener("touchmove", function (e) {
e.preventDefault();
// 一根 手指 执行 目标元素移动 操作
if (e.touches.length == 1 && isTouch) {
//移动目标的 X Y 坐标
var touchMoveX = e.targetTouches[0].pageX,
touchMoveY = e.targetTouches[0].pageY;
//设置当前点击元素的 top left 定位值
e.target.style.left = parseInt(touchMoveX) - parseInt(pageX) + parseInt(initX) + "px";
e.target.style.top = parseInt(touchMoveY) - parseInt(pageY) + parseInt(initY) + "px";
};
// 2 根 手指执行 目标元素放大操作
if (e.touches.length >= 2 && isTouch && e.scale < 2.5) {
//得到第二组两个点
var now = e.touches;
//得到缩放比例， getDistance 是勾股定理的一个方法
var scale = (getDistance(now[0], now[1]) / getDistance(start[0], start[1]));
// 对缩放 比例 取整
e.scale = scale.toFixed(2);
// 执行目标元素的缩放操作
e.target.style.transform = "scale(" + scale + ")";
};
}, false);
//监听 手指离开屏幕时
document.addEventListener("touchend", function (e) {
//将 isTouch 修改为false 表示 手指已经离开屏幕
if (isTouch) {isTouch = false;}
}, false);
//缩放 勾股定理方法
function getDistance(p1, p2) {
var x = p2.pageX - p1.pageX,
y = p2.pageY - p1.pageY;
return Math.sqrt((x * x) + (y * y));
};
</script>
</body>
</html>到 ipad, 安卓, 苹果 上试试效果吧
注释已经写的很全面了 如果想要添加其他的操作 可以在 相应的监听事件里做....
如何 集成到 vue 中 可以查看 Vue 中实现 移动端 缩放位移
以上内容 仅供参考
如有错误请指正 Email:
---------> bianliuzhu@gmail.com <----------
3588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
