JavaScript移动端缩放位移 touch 事件

爬过不少坑 , 总结下基于原生 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:

---------> [email protected] <----------

JavaScript移动端 缩放 位移 touch 事件

猜你喜欢

JavaScript移动端缩放位移 touch 事件