Chrome 39 對 Chrome 中的 Touch API 進行了相對較小的變更，在 TouchEvent 物件上引入了 webkitRotationAngle 屬性的可用版本。在 Chrome 45 (2015 年 7 月的 Beta 版) 中，此事件的名稱已從 rotationAngle 移除前置字串，讓我們的實作更符合 TouchEvent 規格和 Firefox。
雖然 rotationAngle 已推出一段時間，但值得說明 rotationAngle 的用途，因為它可讓您使用更有趣的觸控手勢，尤其是在行動裝置上。
從技術層面來說，旋轉角度是 Touch.radiusX 和 Touch.radiusY 定義的接觸區域橢圓形的角度數值 (介於 0 和 90 之間)。呃，很酷吧？(請注意，我只發現 Android 版 Chrome 不會將 radiusX 和 radiusY 值鎖定為 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;
在實際應用中，您會在哪裡使用這項功能？
以下是使用者可立即獲得好處的幾個明顯情況：
- 舉例來說，繪圖和圖片處理網路應用程式可以使用這項資訊，變更套用至畫布的筆觸或效果。您可以使用觸控半徑變更筆刷大小，並在 rotationAngle 中結合，以便變更畫布上筆刷的接觸角度。
- 強化手勢辨識功能：如果您瞭解 rotationAngle，就可以建立單手指手勢，讓物件旋轉。
所有裝置都支援這項功能嗎？
否。這類情況目前並不常見。如果您有 Nexus 10，您會看到類似下列的畫面，
圖片來源：Rick Byers。
如果裝置無法瞭解觸控的旋轉角度，rotationAngle 會是 0，radiusX 和 radiusY 的值則會相同 (但可能會因目前的觸控表面區域而異)。
為什麼要這麼做？
好問題！就像許多網頁功能一樣，這項功能是額外的體驗。
觸控事件會在支援時運作，如果有半徑和旋轉值，您可以強化應用程式，為使用者提供更強大的體驗。並非每位使用者都有 Wacom 平板電腦，但如果有，許多繪圖應用程式都會利用這項功能。
指標事件又是什麼？
這只是為了確保我們為依賴觸控事件 API 的開發人員提供完整的 API。看看我如何稍微迴避這個問題... 不過，如果您想瞭解 Blink 的 PointerEvent 實作方式，可以為 Issue 471824 加上星號，並閱讀 Rick Byers 的追蹤文件。