Como usar rotationAngle e touchRadius

Paul kinlan

Uma mudança relativamente pequena na API Touch no Chrome chegou ao Chrome 39, que introduziu uma versão funcional do atributo webkitRotationAngle no objeto TouchEvent. Agora no Chrome 45 (Beta em julho de 2015), ele não tem o prefixo rotationAngle, tornando nossa implementação mais alinhada com a especificação TouchEvent e o Firefox.

Embora ele já exista há algum tempo, vale a pena explicar o que é o rotationAngle, porque ele abre 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, não é? Observe que só descobri que o Chrome no Android não bloqueia os valores radiusX e radiusY para 64 px, mas varia dependendo do tamanho do 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. Em vez disso, eles pressionam a tela com frequência como se estivessem identificando uma impressão digital à polícia. Sem o rotationAngle, você conseguiria saber a largura e a altura do gesto de toque. Com o rotationAngle, você tem 90 graus de rotação, sendo 0 vertical e 90 horizontal. Por que só 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 sobre isso é que a área de contato do dedo do usuário muda conforme o grau de pressão do dedo na tela varia. Ele não substitui diretamente o force, mas você pode distinguir entre pincéis leves na tela porque eles têm uma área de superfície menor do que um pressionamento mais forte.

Como posso usar o recurso?

Primeiro, você precisa de um dispositivo que detecte isso. Um Nexus 10 funciona bem. Um ótimo exemplo é analisar o exemplo de pintura de Rick Byers (em inglês). Esta é uma maneira de usar sem o canvas.

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 pontos ó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 ou combinar o rotationAngle para variar o ângulo de contato do pincel na tela.
  • Reconhecimento de gestos aprimorado: se você entender o rotationAngle, poderá criar um gesto com um único dedo para girar um objeto.

Todos os dispositivos são compatíveis com esse recurso?

Não. Isso ainda não é muito comum. Se você tiver um Nexus 10, verá algo como o seguinte:

Captura de tela da rotação do ângulo de toque

Crédito da imagem para Rick Byers.

Quando um dispositivo não consegue entender o ângulo de rotação de um toque, o rotationAngle é 0, e os valores de radiusX e radiusY são iguais, mas podem variar de acordo com a área de toque atual.

Pra que comer isso?

Boa pergunta. Como muitos recursos na Web, essa é uma experiência aditiva.
Os eventos de toque vão funcionar quando houver suporte. Se os valores de raio e rotação estiverem disponíveis, você poderá melhorar o aplicativo para oferecer uma experiência melhor ao usuário. Nem todo usuário tem um tablet Wacom, mas, quando presente, muitos aplicativos de pintura aproveitam esse recurso.

E os eventos de ponteiro?

Trata-se apenas de garantir que tenhamos uma API de eventos de toque totalmente desenvolvida para os desenvolvedores que dependem dela. Vê como eu evitei um pouco a pergunta... Porém, o mais importante é que, se você tiver interesse em acompanhar a implementação do PointerEvent do Blink, marque com estrela o Problema 471824 e leia o documento de acompanhamento do Rick Byers.

Ver também