Uma mudança relativamente pequena na API Touch no Chrome foi lançada no
Chrome 39, que
apresentou uma versão funcional do atributo webkitRotationAngle no
objeto TouchEvent. Agora, no Chrome 45 (Beta em julho de 2015), o prefixo foi removido e ele é rotationAngle,
o que alinha nossa implementação com a
especificação do
TouchEvent
e o Firefox.
Embora já exista há algum tempo, vale a pena explicar o que é
rotationAngle, já que ele permite um uso mais interessante de gestos
de toque, especialmente em dispositivos móveis.
Tecnicamente, o ângulo de rotação é o número de graus (entre 0 e 90) da
elipse da área de contato definida por
Touch.radiusX
e
Touch.radiusY.
Legal, certo? Descobri que o Chrome no
Android não bloqueia os valores radiusX e radiusY em 64 px, mas
variáveis, dependendo do tamanho de contato da tela.
O que isso significa?
Pense nisso como uma maneira de representar com precisão o tamanho, a forma e a orientação do
dedo do usuário em uma tela. Os usuários nem sempre tocam na tela com a ponta
do dedo, mas pressionam a tela com frequência, como se estivessem
uma impressão digital para a polícia. Sem o rotationAngle, você saberia
apenas a largura e a altura do gesto de toque. Com o rotationAngle, você
recebe 90 graus de rotação (0 é vertical e 90 é horizontal). Por que apenas
90 graus? Você só precisa dos 90 graus porque, à medida que você passa por esses ângulos,
o radiusX e o radiusY mudam para se acomodar.
Outra coisa legal é que a área de contato do dedo do usuário muda
conforme o grau de pressão do dedo na tela. Ele não é uma
substituição direta para force, mas você pode distinguir entre pincéis leves
na tela porque eles têm uma área de superfície menor do que uma pressão mais forte.
Como posso usar?
Primeiro, você precisa de um dispositivo que possa detectar isso. Um Nexus 10 vai funcionar bem. Um ótimo exemplo é olhar diretamente para o exemplo de pintura de Rick Byers. Para não ficar para trás, aqui está uma maneira de usar sem tela.
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;
Onde você usaria isso na prática?
Há alguns lugares óbvios em que isso seria um benefício imediato para o usuário:
- Por exemplo, apps da Web de pintura e manipulação de imagens podem usar essas informações para alterar o traço ou os efeitos aplicados à tela. Você pode usar o raio de toque para alterar o tamanho do pincel e combiná-lo no rotationAngle para variar o ângulo de contato do pincel na tela.
- Reconhecimento de gestos aprimorado: se você entender o rotationAngle, poderá criar um gesto de um único dedo para girar um objeto.
Todos os dispositivos são compatíveis?
Não. Ainda não é muito comum. Se você tiver um Nexus 10, verá algo como o seguinte:
Crédito da imagem: Rick Byers.
Quando um dispositivo não consegue entender o ângulo de rotação de um toque, o
rotationAngle será 0 e os valores radiusX e radiusY serão
iguais, mas podem variar dependendo da área da superfície de toque atual.
Pra que comer isso?
Boa pergunta. Como muitos recursos na Web, essa é uma experiência complementar.
Os eventos de toque vão funcionar quando houver suporte e, se os valores de raio e rotação estiverem
disponíveis, você poderá aprimorar seu aplicativo para oferecer ao usuário uma experiência
mais eficiente. Nem todos os usuários têm um tablet Wacom, mas, quando presentes, muitos
aplicativos de pintura aproveitam essa tecnologia.
E os eventos de ponteiro?
Isso é apenas para garantir que temos uma API de evento de toque completa para os desenvolvedores que dependem dela. Veja como eu evitei a pergunta... Mas, sério, se você tiver interesse em acompanhar a implementação do PointerEvent do Blink, marque com uma estrela a Issue 471824 e leia o documento de rastreamento de Rick Byers.