精準手勢的精確度

Matt Gaunt

自 M37 版本 (2014 年 8 月推出穩定版) 起,Chrome 的 TouchEvents 實作方式已完成變更,將回報的座標從整數改為浮點數。

之前 使用後
clientX: 167
clientY: 196
pageX:   167
pageY:   196
radiusX: 26
radiusY: 26
screenX: 167
screenY: 277
clientX: 167.33299255371094
clientY: 195.66700744628906
pageX:   167.33299255371094
pageY:   195.66700744628906
radiusX: 25.843116760253906
radiusY: 25.843116760253906
screenX: 167.33334350585938
screenY: 276.66668701171875

這項異動可讓您更準確地判斷手指位置,進而更順暢地回應使用者的手勢。

透過 Rick Byers 的示範,您可以瞭解在慢慢繪製漩渦時,這項功能可以帶來多大的差異。

觸控事件的差異。

這項設定只會影響像素密度大於 1 的螢幕。為了瞭解原因,我們來看看以下範例。

假設您有 3x3 格式的 CSS 像素,且螢幕密度為 3,表示我們有 9x9 格式的 實體像素,以及從左上到右下的手勢。

CSS 像素和螢幕像素格狀拼貼。

原本,我們會將觸控位置四捨五入至最近的 CSS 像素,這表示在這個手勢中,您會執行下列步驟。

手勢期間的 CSS 像素精確度。

我們會錯過繪製任何中間步驟,這些步驟會在使用者移動手指時顯示實體像素。

切換至浮點值後,手勢會變成這樣。

手勢期間的浮點精確度。

在大多數情況下,您不需要變更程式碼,但這表示您因 TouchEvents 而執行的任何動畫或動作都會更流暢,尤其是緩慢的手勢。

我們也計劃將這項改善功能納入行動版 Safari:https://bugs.webkit.org/show_bug.cgi?id=133180