JavaScript是一門現代化、多功能的編程語言，最近一直在追求越來越多的手勢交互體驗。觸屏設備越來越普及，越來越多的網站和APP也開始加入手勢操作，其中之一就是手勢放大縮小圖片。在本文中，我們將介紹如何在JavaScript中創建手勢圖片放大效果。
首先，我們需要了解一些基礎知識，例如瀏覽器事件和觸屏事件。我們需要偵聽鼠標和觸摸事件，因為這些事件可以告訴我們頁面上發生的交互類型。在JavaScript中，我們使用addEventListener()方法來監聽用戶事件。
接下來，我們需要將圖片放置在頁面上，我們可以使用HTML的img標簽來實現。我們可以使用JavaScript來獲取圖片元素和它的尺寸，以便在后面的代碼中使用。我們還需要為圖片元素設置一個初始大小和位置，這是我們接下來要處理的。
為了實現手勢放大效果，我們需要捕捉用戶的手勢動作。我們可以使用gesturestart、gesturechange和gestureend事件來跟蹤這些操作。這些事件是多次觸發的，我們可以使用他們來改變圖片元素的位置、大小和旋轉。
下面是一段演示代碼：
<img src="picture.jpg" id="picture">
<script>
var picture = document.getElementById('picture');
var originalWidth = picture.width;
var originalHeight = picture.height;
var currentWidth;
var currentHeight;
var lastScale = 1;
var lastRotation = 0;
var startX;
var startY;
var deltaX;
var deltaY;
var lastX;
var lastY;
var isDragging = false;
var isScaling = false;
var isRotating = false;
var lastGestureEvent = null;
picture.addEventListener('mousedown', startDrag);
picture.addEventListener('mousemove', drag);
picture.addEventListener('mouseup', endDrag);
picture.addEventListener('touchstart', startMultiGesture);
picture.addEventListener('touchmove', multiGesture);
picture.addEventListener('touchend', endMultiGesture);
function startDrag(event) {
startX = event.pageX;
startY = event.pageY;
lastX = picture.offsetLeft;
lastY = picture.offsetTop;
isDragging = true;
}
function drag(event) {
if(isDragging) {
deltaX = event.pageX - startX;
deltaY = event.pageY - startY;
picture.style.left = lastX + deltaX + 'px';
picture.style.top = lastY + deltaY + 'px';
}
}
function endDrag(event) {
isDragging = false;
}
function startMultiGesture(event) {
event.preventDefault();
if(event.touches.length == 2) {
lastGestureEvent = event;
isScaling = true;
isRotating = true;
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
currentWidth = picture.offsetWidth;
currentHeight = picture.offsetHeight;
}
}
function multiGesture(event) {
event.preventDefault();
if(isScaling || isRotating) {
var scale = 1;
var rotation = 0;
if(event.touches.length == 2) {
var dx = event.touches[0].pageX - event.touches[1].pageX;
var dy = event.touches[0].pageY - event.touches[1].pageY;
scale = Math.sqrt(dx*dx + dy*dy) / lastGestureEvent.scale;
rotation = Math.atan2(dy, dx) - Math.atan2(lastGestureEvent.touches[0].pageY - lastGestureEvent.touches[1].pageY,
lastGestureEvent.touches[0].pageX - lastGestureEvent.touches[1].pageX);
}
if(isScaling) {
var newWidth = currentWidth * scale * lastScale;
var newHeight = currentHeight * scale * lastScale;
picture.style.width = newWidth + 'px';
picture.style.height = newHeight + 'px';
}
if(isRotating) {
var newRotation = rotation + lastRotation;
picture.style.transform = 'rotate(' + newRotation + 'rad)';
}
lastScale = scale;
lastRotation = rotation;
lastGestureEvent = event;
}
}
function endMultiGesture(event) {
isScaling = false;
isRotating = false;
lastGestureEvent = null;
}