触摸压力可视化演示 - 3D Touch/Force

3D Touch（三维触控）和 Force Touch（力度触控）是 Apple 推出的压力感应技术，能够感知用户触摸屏幕时的按压力度。通过检测屏幕玻璃与背光层之间微小的距离变化，设备可以将压力值量化为 0.0 到 1.0 的归一化数值（对应约 0~385 克力）。这项技术首次出现在 iPhone 6s 上，随后扩展到 MacBook 触控板和 Apple Watch。在 Web 端，开发者可通过 Touch.force 属性获取实时压力值。

支持 Touch.force 原生压力值的设备主要包括：
✅ iPhone 6s / 6s Plus、iPhone 7 / 7 Plus、iPhone 8 / 8 Plus、iPhone X、iPhone XS / XS Max
✅ 部分 iPad Pro 型号（配合 Apple Pencil 时压力精度更高）
✅ MacBook Pro (2015+) 的 Force Touch 触控板
❌ iPhone 11 及之后机型已移除 3D Touch 硬件，改用 Haptic Touch（长按触觉反馈），force 始终为 0
❌ 绝大多数 Android 设备不支持 Touch.force，但可通过 Touch.radiusX（触摸椭圆半径）间接估算压力。

本工具内置了智能回退机制：
🔹 移动端（Android / 新型 iPhone）：使用触摸点的椭圆面积（radiusX × radiusY）来估算压力——手指按得越重，与屏幕的接触面积越大，压力估算值越高。
🔹 桌面端（鼠标）：按住鼠标左键，压力值会随时间逐渐上升（约 2 秒达到最大值 1.0），松开后立即归零。也可以使用鼠标滚轮微调压力值。
界面上方会实时显示当前使用「原生压力」还是「模拟模式」。

压力值被归一化到 0.0 ~ 1.0 的范围：
• 0.00 ~ 0.15：极轻触摸（手指刚刚接触屏幕）
• 0.15 ~ 0.35：轻度按压（正常点击力度）
• 0.35 ~ 0.60：中度按压（有意识的按压）
• 0.60 ~ 0.85：重度按压（明显的用力按压）
• 0.85 ~ 1.00：极大压力（接近硬件极限，约 385g 力）
球体颜色会从蓝色（轻）→ 青色 → 绿色 → 橙色 → 红色（重）渐变，直观反映压力等级。

在 JavaScript 中，通过监听 touchmove 事件并访问 event.touches[0].force 即可获取压力值。示例代码：

element.addEventListener('touchmove', (e) => {
  const force = e.touches[0].force; // 0.0 ~ 1.0
  const radiusX = e.touches[0].radiusX; // 触摸椭圆半径（fallback）
  console.log('Pressure:', force, 'Radius:', radiusX);
});

注意：force 仅在支持 3D Touch 的设备上返回非零值。对于不支持的情况，可结合 radiusX 和 radiusY 估算。

触摸压力可视化工具可用于：
🎨 UI/UX 设计参考：了解不同压力等级对应的视觉反馈设计
🧪 设备兼容性检测：快速判断当前设备是否支持 3D Touch
📱 Web 应用开发调试：在开发压力感应功能时实时查看压力数据
🎮 游戏交互原型：测试基于压力的游戏操控方案（如赛车油门、画笔粗细等）
📊 人机交互研究：收集触摸行为数据用于分析

如果压力值始终显示 0.00，可能的原因：
1️⃣ 您的设备不支持 3D Touch（如 iPhone 11+、大多数 Android 手机）——工具会自动切换到模拟模式
2️⃣ 使用的是鼠标操作——请按住鼠标左键不放，压力值会逐渐上升
3️⃣ 浏览器未传递 force 属性——尝试使用 Safari（iOS）或更新浏览器版本
4️⃣ 触摸过于轻微——在模拟模式下，需要手指与屏幕有足够的接触面积才能检测到压力变化
请查看界面顶部的设备状态指示器，确认当前工作模式。