js实现pinch
实现 Pinch 手势的 JavaScript 方法
Pinch 手势通常用于缩放操作，通过检测两个触点的距离变化来实现。以下是实现 Pinch 手势的核心逻辑：
监听触摸事件
需要监听 touchstart、touchmove 和 touchend 事件来跟踪手指位置。确保在 touchstart 事件中检查是否有两个触点。
let initialDistance = null;
element.addEventListener('touchstart', (e) => {
if (e.touches.length === 2) {
initialDistance = getDistance(e.touches[0], e.touches[1]);
}
});计算触点距离 定义一个辅助函数来计算两个触点之间的欧几里得距离：
function getDistance(touch1, touch2) {
const dx = touch1.clientX - touch2.clientX;
const dy = touch1.clientY - touch2.clientY;
return Math.sqrt(dx * dx + dy * dy);
}处理缩放比例
在 touchmove 事件中计算当前距离与初始距离的比例，并触发缩放回调：
element.addEventListener('touchmove', (e) => {
if (e.touches.length === 2 && initialDistance !== null) {
const currentDistance = getDistance(e.touches[0], e.touches[1]);
const scale = currentDistance / initialDistance;
// 调用缩放处理函数
handleZoom(scale);
}
});重置初始状态
在 touchend 事件中重置初始距离，防止错误触发：
element.addEventListener('touchend', () => {
initialDistance = null;
});优化与注意事项
节流处理
频繁的 touchmove 事件可能导致性能问题，建议使用 requestAnimationFrame 进行节流：
let isAnimating = false;
element.addEventListener('touchmove', (e) => {
if (!isAnimating && e.touches.length === 2 && initialDistance !== null) {
isAnimating = true;
requestAnimationFrame(() => {
const currentDistance = getDistance(e.touches[0], e.touches[1]);
const scale = currentDistance / initialDistance;
handleZoom(scale);
isAnimating = false;
});
}
});兼容性处理 对于非触摸设备，可以结合鼠标滚轮事件实现类似功能：
element.addEventListener('wheel', (e) => {
e.preventDefault();
const delta = -e.deltaY;
const scale = delta > 0 ? 1.1 : 0.9;
handleZoom(scale);
});CSS 变换支持
若需要实现视觉缩放效果，可以使用 CSS 的 transform 属性：
function handleZoom(scale) {
element.style.transform = `scale(${scale})`;
}完整示例代码
以下是一个完整的 Pinch 手势实现示例：
const element = document.getElementById('zoomable');
let initialDistance = null;
function getDistance(touch1, touch2) {
const dx = touch1.clientX - touch2.clientX;
const dy = touch1.clientY - touch2.clientY;
return Math.sqrt(dx * dx + dy * dy);
}
function handleZoom(scale) {
element.style.transform = `scale(${scale})`;
}
element.addEventListener('touchstart', (e) => {
if (e.touches.length === 2) {
initialDistance = getDistance(e.touches[0], e.touches[1]);
}
});
element.addEventListener('touchmove', (e) => {
if (e.touches.length === 2 && initialDistance !== null) {
const currentDistance = getDistance(e.touches[0], e.touches[1]);
const scale = currentDistance / initialDistance;
handleZoom(scale);
}
});
element.addEventListener('touchend', () => {
initialDistance = null;
});
