對 Chrome 導入 Touch API 的細微變化
Chrome 39，
導入了可正常運作版本的 webkitRotationAngle 屬性
TouchEvent 物件。現在在 Chrome 45 (2015 年 7 月推出的 Beta 版) 中，未加上 rotationAngle 的前置字元。
更加像是
TouchEvent
規格和 Firefox
儘管存在一段時間，但還是值得一試
rotationAngle 能開啟更多有趣的觸控功能
尤其適合透過行動裝置瀏覽
嚴格說來，旋轉角度是指 (0 到 90 之間)
聯絡區域橢圓
Touch.radiusX
和
Touch.radiusY：
呃，對吧？(請注意，我只在
Android 不會將 radiusX 和 radiusY 的值鎖定為 64 像素
則會因畫面的聯絡人大小而異)。
這是什麼意思？
因此，正確地反映廣告的大小、形狀及方向
使用者的手指放在螢幕上使用者不一定會用凹槽輕觸螢幕
更頻繁地按下螢幕
指紋沒有 rotationAngle 則能輕鬆取得
觸控手勢的寬度和高度。透過 rotationAngle，你可以
可旋轉 90 度 (0 代表垂直，90 為水平)。為什麼只需
90 度？您只需要 90 度，因為您移動到這些角度
radiusX 和 radiusY 會配合調整。
還有一個好消息是使用者手指的接觸區域會跟著改變
因為手指在螢幕上的壓力越大變化這不是
直接更換 force，但你可以區分各種照刷類型
因為螢幕表面的面積比不難按下的還要小。
使用方式
首先，你需要能夠偵測到這項資訊的裝置。Nexus 10 正常運作。A 罩杯 您可以直接查看 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;
你會實際運用這個例子進行哪些工作？
有一些明顯的地方會讓產品即時成長 使用者：
- 舉例來說，繪圖和圖片操控網頁應用程式 資訊來改變畫布的筆觸或效果。您可以 使用觸控半徑改變筆刷大小，您也可以結合 旋轉角度，可調整畫布上筆刷的觸角。
- 強化手勢辨識：只要您瞭解旋轉角度，即可 建立單指手勢，讓物體搖晃。
所有裝置都支援這項功能嗎？
不，這並不是很常見的情況。Nexus 10 使用者： 如下所示
提供給 Rick Byers 的圖片。
如果裝置無法理解輕觸的旋轉角度，
rotationAngle 的值為 0，radiusX 和 radiusY 值會是
等於 (但可能因目前的觸控表面區域而異)。
為什麼會感到困擾？
好問題！就像網路上的許多功能一樣，這會帶來附加體驗。
如果系統支援這項功能，以及半徑和旋轉值 (
您就能強化應用程式，讓使用者更有能力
無須專人管理並不是每位使用者都有 Wacom 平板電腦，但在展現許多畫作時
就能運用這項功能
指標事件呢？
這只是為了確保我們有面面俱到的觸覺活動 我們為仰賴這個架構的開發人員提供專屬的 API看看我怎麼對問題略勝過...更多內容 如果你有興趣參加 Blink 的 PointerEvent 不妨將 問題 471824 加上星號 閱讀 Rick Byers'追蹤文件。