移动端手指缩放旋转拖拽操作灵活实用，轻松实现各种复杂操作

2023-10-24 04:09:48

双指缩放

双指缩放是通过计算手指之间的距离来实现的。当手指之间的距离增加时，内容会放大；当手指之间的距离减小时，内容会缩小。

/* 缩放容器 */
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 缩放元素 */
.element {
  width: 50%;
  height: 50%;
  margin: auto;
}

/* 当手指触摸屏幕时，记录手指之间的距离 */
document.addEventListener('touchstart', function(event) {
  if (event.touches.length == 2) {
    initialDistance = Math.sqrt((event.touches[0].clientX - event.touches[1].clientX) ** 2 + (event.touches[0].clientY - event.touches[1].clientY) **  2);
  }
});

/* 当手指在屏幕上移动时，计算手指之间的距离并缩放元素 */
document.addEventListener('touchmove', function(event) {
  if (event.touches.length == 2) {
    currentDistance = Math.sqrt((event.touches[0].clientX - event.touches[1].clientX) ** 2 + (event.touches[0].clientY - event.touches[1].clientY) **  2);
    scaleFactor = currentDistance / initialDistance;
    element.style.transform = 'scale(' + scaleFactor + ')';
  }
});

单指拖动

单指拖动是通过计算手指在屏幕上的移动距离来实现的。当手指在屏幕上移动时，内容也会相应地移动。

/* 拖动容器 */
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 拖动元素 */
.element {
  width: 50%;
  height: 50%;
  margin: auto;
}

/* 当手指触摸屏幕时，记录手指的坐标 */
document.addEventListener('touchstart', function(event) {
  if (event.touches.length == 1) {
    startX = event.touches[0].clientX;
    startY = event.touches[0].clientY;
  }
});

/* 当手指在屏幕上移动时，计算手指移动的距离并移动元素 */
document.addEventListener('touchmove', function(event) {
  if (event.touches.length == 1) {
    currentX = event.touches[0].clientX;
    currentY = event.touches[0].clientY;
    translateX = currentX - startX;
    translateY = currentY - startY;
    element.style.transform = 'translate(' + translateX + 'px, ' + translateY + 'px)';
  }
});