精準手勢的精確度

Matt Gaunt

自 M37 起 (2014 年 8 月 1 日),Chrome 的 TouchEvents 實作變更已降落,這會將回報的座標改為浮點值,而非整數。

使用前 使用後
clientX:167
clientY:196
pageX: 167
pageY: 196
dpX: 26
半徑: 26
screenX: 167
screenY: 277
clientX:167.33299255371094
clientY: 195.66700744628906
pageX: 167.33299255371094
pageY: 195.66700744628606



這項變更會造成使用者的手勢回應更順暢,因為可提高手指位置的準確度。

透過 Rick Byers 示範,您可以看到在慢慢繪製漩渦時所產生的巨大差異。

觸控事件的差異。

這項設定只會影響像素密度大於 1 的螢幕。為了瞭解原因,以下將舉例說明。

假設你有 3x3 的 CSS 像素網格,且螢幕密度為 3,代表我們的格線大小為 9x9 實體像素,而使用者從左上角到右下角做出手勢。

CSS 像素和螢幕像素格狀檢視畫面。

最初,我們將觸控位置四捨五入至最接近的 CSS 像素,在這個手勢中,最終您會完成下列步驟。

手勢中的 CSS 像素精度。

我們未能繪製任何中繼步驟,導致使用者移動手指時,實體像素可能顯示。

我們改為使用浮動式顯示後,手勢看起來會像這樣。

手勢時的浮點精確度。

在多數情況下,您不需要在程式碼上進行任何變更,但這也表示您透過 TouchEvents 所做的動畫或動作都能更順暢,尤其是對於緩慢手勢而言。

我們也打算將這項改善措施導入行動版 Safari:https://bugs.webkit.org/show_bug.cgi?id=133180