js实现手势
手势识别基础概念
手势识别通常基于触摸事件（TouchEvent）实现，需监听touchstart、touchmove、touchend等事件。通过分析触摸点的移动轨迹、速度、方向等特征判断手势类型（如滑动、缩放、旋转）。
监听触摸事件
const element = document.getElementById('gesture-area');
element.addEventListener('touchstart', handleTouchStart);
element.addEventListener('touchmove', handleTouchMove);
element.addEventListener('touchend', handleTouchEnd);实现滑动检测
记录起始和结束坐标，计算位移差判断方向：
let startX, startY;
function handleTouchStart(e) {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
}
function handleTouchMove(e) {
const deltaX = e.touches[0].clientX - startX;
const deltaY = e.touches[0].clientY - startY;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
console.log(deltaX > 0 ? '右滑' : '左滑');
} else {
console.log(deltaY > 0 ? '下滑' : '上滑');
}
}实现双指缩放
通过两点距离变化计算缩放比例：
let initialDistance;
function handleTouchStart(e) {
if (e.touches.length === 2) {
initialDistance = getDistance(e.touches[0], e.touches[1]);
}
}
function handleTouchMove(e) {
if (e.touches.length === 2) {
const currentDistance = getDistance(e.touches[0], e.touches[1]);
const scale = currentDistance / initialDistance;
console.log(`缩放比例: ${scale.toFixed(2)}`);
}
}
function getDistance(touch1, touch2) {
return Math.hypot(
touch2.clientX - touch1.clientX,
touch2.clientY - touch1.clientY
);
}使用现成库简化开发
推荐使用以下库处理复杂手势：
- Hammer.js：轻量级手势库，支持滑动、按压、旋转等
const hammertime = new Hammer(element); hammertime.on('swipe', (e) => { console.log(`方向: ${e.direction}`); }); - AlloyFinger：专为移动端设计，支持多点触控手势
- Interact.js：提供拖拽、缩放等高级交互功能
性能优化建议
避免在touchmove中执行耗时操作，使用requestAnimationFrame优化渲染。对于高频触发的操作（如实时画线），可使用节流（throttle）减少处理频率。
兼容性处理
部分旧浏览器需添加前缀：
element.addEventListener('MSGestureStart', handleGesture);
element.addEventListener('gesturechange', handleGesture);手势反馈设计
视觉反馈很重要，可通过CSS过渡或变换（transform）实时响应手势操作。例如缩放时同步调整元素大小：
element.style.transform = `scale(${scale})`;
