此页面由 Cloud Translation API 翻译。

使用 rotationAngle 和 touchRadius

Paul Kinlan

我们对 Chrome 中的 Touch API 进行了相对较小的更改， Chrome 39：在webkitRotationAngle TouchEvent 对象。现在，在 Chrome 45（2015 年 7 月推出 Beta 版）中，它不带前缀 rotationAngle，使我们的实施方式更符合 TouchEvent 和 Firefox。

虽然这已经有一段时间了，但有必要解释一下 rotationAngle，因为它可以打开一些更有趣的触摸用法尤其是在移动设备上

从技术上讲，旋转角度是所定义的接触区椭圆 Touch.radiusX 和 Touch.radiusY。呃，很酷，对吧？（请注意，我只是发现 Android 不会将 radiusX 和 radiusY 值锁定为 64px，而是将其锁定为 64px 因屏幕的接触面尺寸而异）。

这实际上意味着什么？

您可以将其想象为一种准确表示将用户的手指放在屏幕上用户并非总是使用笔尖点按屏幕但要频繁地按压屏幕向警方报警。如果没有 rotationAngle，触摸手势的宽度和高度。借助 rotationAngle，您可以获得旋转 90 度（0 表示垂直，90 表示水平）。为什么 90 度？您只需要成 90 度 radiusX和radiusY将进行相应更改以适应新变化。

还有一点也很酷，那就是用户手指的接触区域会发生变化因为它们会改变手指在屏幕上的压力程度它不是直接替换 force，但您可以区分浅色笔刷因为它们的表面积比用力按压时要小

如何使用？

首先，您需要一个可以检测到这种情况的设备。Nexus 10 就够用了。答直接查看 Rick Byers 绘制示例。不可超过但您可以在没有画布的情况下使用。

var touchHandler = function(e) {
    e.preventDefault();
    var touches = e.changedTouches;
    var touch = touches[0]; // only concerned about first touch.
    
    var rotationAngle = touch.rotationAngle || touch.webkitRotationAngle || 0;
    var radiusX = touch.radiusX || touch.webkitRadiusX || 1;
    var radiusY = touch.radiusY || touch.webkitRadiusY || 1;
    var force = touch.force || touch.webkitForce || 0;
    
    // Use the rotationAngle to rotate the 'p' element.
    
    p.style.width = radiusX * 2 + 'px';
    p.style.height = radiusY * 2 + 'px';
    p.style.transform = "rotate(" + rotationAngle + "deg)";
};

document.documentElement.ontouchstart = touchHandler;
document.documentElement.ontouchend = touchHandler;
document.documentElement.ontouchmove = touchHandler;

在实际应用中，您会如何运用这种技术？

显而易见，这对于用户：

例如，绘画和图片处理 Web 应用可以使用此信息以改变应用到画布的笔触或效果。您可以您可以使用触摸半径更改画笔大小 rotationAngle，用于改变画笔在画布上的接触角度。
增强的手势识别：如果您了解 rotationAngle，用单指手势来转动对象

是否所有设备都支持此功能？

不会。这种情况还不太常见。如果你使用的是 Nexus 10 您会看到如下内容，

图片来源：Rick Byers。

如果设备无法理解触摸的旋转角度， rotationAngle 将为 0，而 radiusX 和 radiusY 的值将为相等（但可能会因当前的触摸表面而有所不同）。

何必苦苦？

问的好。与网络上的许多功能一样，这是一项附加体验。
触摸事件在支持且半径值和旋转值您可以增强自己的应用，让用户能够更好地体验并非每个用户都有 Wacom 平板电脑，但在展示很多绘画时以便应用充分利用这一功能

指针事件呢？

这只是为了确保我们有一个完善的触摸事件面向依赖于它的开发者的 API。来看看我如何稍微规避一下这个问题...更多不过，如果您想关注 Blink 的 PointerEvent 可以在实现时为问题 471824 加注星标，阅读 Rick Byers 的跟踪文档。