双指触控需监听touchstart/touchmove事件，取touches[0]和touches[1]坐标，用欧氏距离公式计算间距，用Math.atan2求角度并归一化到[-180,180)。
在移动端 JavaScript 中，要获取多点触控（如双指）的手势距离和角度，核心是监听 touchstart、touchmove 事件，从 TouchEvent.touches 中提取两个触点坐标，再用几何公式计算欧氏距离和方向夹角。
获取两个触点的坐标
移动端触控事件的 touches 是一个类数组对象，记录当前所有接触屏幕的触点。双指操作时，通常取前两个（touches[0] 和 touches[1]）即可：
- 注意使用
touches而非changedTouches，后者只包含本次事件中状态变化的触点，可能只有 1 个； - 需先判断
touches.length >= 2，避免越界访问； - 坐标用
clientX/clientY即可（视口内像素位置），一般无需转换为页面坐标，除非涉及滚动偏移。
计算两点间距离（缩放基线）
两点 (x1, y1) 和 (x2, y2) 的欧氏距离公式为：
distance = Math.sqrt((x2 - x1)² + (y2 - y1)²)
- 该距离常用于检测缩放（pinch）：对比上一帧距离，得出缩放比例；
- 建议缓存上一次的距离值（如存在
lastDistance），在touchmove中实时更新； - 注意防抖：距离变化极小时（如
Math.abs(distance - lastDistance) ）可忽略，减少计算开销。
计算两点连线与水平轴的夹角（旋转基线）
使用 Math.atan2(dy, dx) 获取弧度制夹角（范围 -π 到 π），再转为 0–360° 更直观：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
const dx = x2 - x1;const dy = y2 - y1;const rad = Math.atan2(dy, dx);const deg = (rad * 180 / Math.PI + 360) % 360; - 该角度表示从触点 1 指向触点 2 的方向；旋转手势通常用「角度变化量」：当前角度减去上一帧角度（需处理跨 0° 的情况，例如 359° → 1° 应算作 +2° 而非 -358°）；
- 简单跨 0 处理：计算差值后，若
diff > 180，减去 360；若diff ，加上 360。
基础示例代码结构
以下是最简可用骨架（无防误触、无边界处理，仅展示核心逻辑）：
let lastDistance = 0;
let lastAngle = 0;
<p>element.addEventListener('touchstart', handleTouch);
element.addEventListener('touchmove', handleTouch);</p><p>function handleTouch(e) {
if (e.touches.length </p><p>const distance = Math.sqrt((x2 - x1)<strong>2 + (y2 - y1)</strong>2);
const dx = x2 - x1, dy = y2 - y1;
const angle = (Math.atan2(dy, dx) * 180 / Math.PI + 360) % 360;</p><p>if (e.type === 'touchmove') {
const scale = distance / lastDistance || 1;
const rotation = angle - lastAngle;</p><pre class="brush:php;toolbar:false;">// ✅ 此处可触发缩放/旋转逻辑，如 transform: scale() rotate()
console.log({ scale, rotation });}
lastDistance = distance; lastAngle = angle; }
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
