touch事件实现双指缩放_t触摸两指缩放

作者：我家小花儿 | 2024-03-09 09:59:11

踩

t触摸两指缩放

<!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">


<div class="box"></div>

</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>

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】