写一段控制双指缩放、单指拖动的js代码,盒子ID为box,缩放时以手指触点为缩放中心点
时间: 2024-05-08 07:14:55 浏览: 64
首先需要获取手指触摸事件的坐标,通过判断触摸点数量,分别处理单指拖动和双指缩放:
```
var box = document.getElementById("box");
var lastDistance = 0;
var startX = 0, startY = 0;
var isDragging = false;
box.addEventListener("touchstart", function(event) {
var touches = event.touches;
if (touches.length == 1) { // 单指拖动
startX = touches[0].pageX;
startY = touches[0].pageY;
isDragging = true;
} else if (touches.length == 2) { // 双指缩放
var distance = Math.sqrt(
Math.pow(touches[0].pageX - touches[1].pageX, 2) +
Math.pow(touches[0].pageY - touches[1].pageY, 2)
);
lastDistance = distance;
}
});
box.addEventListener("touchmove", function(event) {
var touches = event.touches;
if (touches.length == 1 && isDragging) { // 单指拖动
var offsetX = touches[0].pageX - startX;
var offsetY = touches[0].pageY - startY;
box.style.transform = "translate(" + offsetX + "px, " + offsetY + "px)";
} else if (touches.length == 2) { // 双指缩放
var distance = Math.sqrt(
Math.pow(touches[0].pageX - touches[1].pageX, 2) +
Math.pow(touches[0].pageY - touches[1].pageY, 2)
);
var scale = distance / lastDistance;
box.style.transformOrigin = touches[0].pageX + "px " + touches[0].pageY + "px";
box.style.transform = "scale(" + scale + ")";
lastDistance = distance;
}
});
box.addEventListener("touchend", function(event) {
isDragging = false;
});
```
在单指拖动时,通过计算当前触摸点与起始触摸点的偏移量,更新盒子的`transform`属性实现拖动效果。
在双指缩放时,先计算当前两个触摸点的距离,然后计算缩放比例,最后设置盒子的`transform-origin`属性为触摸点的坐标,再设置`transform`属性为缩放值,实现缩放效果。同时需要记录上一次触摸点距离,以便计算缩放比例。
在触摸结束时,将`isDragging`设置为false,禁止继续拖动。
阅读全文