精準手勢的精確度

Matt Gaunt

自 M37 起,在 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



這項變更的結果表示手指位置可以提高使用者手勢的順暢度,

您可以利用 Rick Byers 示範,瞭解緩慢繪製旋轉時可能發生的重大差異。

觸控事件的差異。

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

假設您使用的 CSS 像素 3x3 格線,且螢幕密度為 3,這表示格線的實體像素為 9x9,使用者手勢從左上角到右下角。

CSS 像素和螢幕像素格線。

一開始,我們會將觸控位置四捨五入至最接近的 CSS 像素,在這個手勢中,您必須按照下列步驟進行。

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

我們漏掉了實體像素在使用者移動手指時顯示的中階步驟。

現在我們切換成浮動模式,手勢看起來會像這樣。

做出手勢時的浮點精確度。

在大多數情況下,這不需要對程式碼進行任何變更,但這意味著您透過 TouchEvents 進行的任何動畫或動作都會更順暢,尤其是在緩慢手勢時。

我們也計劃針對行動版 Safari 進行這項改善:https://bugs.webkit.org/show_bug.cgi?id=133180