Toque com precisão para gestos precisos

Uma mudança foi feita na implementação dos TouchEvents (link em inglês) do Chrome a partir da versão M37 (estável em 08/2014), que muda as coordenadas relatadas para flutuantes em vez de números inteiros.

Antes Depois
clientX: 167
clientY: 196
pageX:   167
pageY:   196
radiusX: 26
radiusY: 26
screenX: 167
screenY: 277
clientX: 167.33299255371094
clientY385.6010944628906
pageX:60744628906




O resultado dessa mudança significa que você terá uma resposta mais suave aos gestos do usuário, o que proporciona maior precisão da posição dos dedos.

Usando a demonstração de Rick Byers, é possível ver a grande diferença que isso pode fazer ao desenhar um redemoinho lentamente.

Diferenças em eventos de toque.

Isso só afetará as telas que tenham uma densidade de pixel maior que 1. Para entender o porquê, vamos analisar um exemplo.

Imagine que você tem uma grade de pixels CSS (link em inglês) e a densidade da tela 3, ou seja, que temos uma grade de pixels físicos de 9x9, e o usuário gesticula do canto superior esquerdo para o canto inferior direito.

Pixel CSS e grade de pixels da tela.

Originalmente, arredondamos a posição dos toques para o pixel CSS mais próximo, o que significava que, nesse gesto, você teria as próximas etapas.

Precisão de pixels CSS durante o gesto.

Não conseguimos desenhar qualquer uma das etapas intermediárias que os pixels físicos podem mostrar à medida que o usuário move o dedo.

Agora que mudamos para flutuantes, nosso gesto pode ficar assim.

Precisão de ponto flutuante durante o gesto.

Na maioria dos casos, não será preciso fazer mudanças no código, mas as animações ou movimentos feitos como resultado do TouchEvents vão ser mais suaves, especialmente para gestos lentos.

Também planejamos implementar essa melhoria no Safari para dispositivos móveis: https://bugs.webkit.org/show_bug.cgi?id=133180.