Como usar rotationAngle e touchRadius

Paul Kinlan

Uma mudança relativamente pequena na API Touch no Chrome foi lançada no 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 prefixo como rotationAngle, tornando nossa implementação mais alinhada com a especificação TouchEvent e o Firefox.

Embora já exista há algum tempo, vale a pena explicar o que é rotationAngle, já que 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é? (Vale ressaltar que só descobri que o Chrome no Android não bloqueia os valores radiusX e radiusY em 64 px, mas os varia de acordo com o tamanho de contato da tela).

O que isso significa?

Pense nisso como uma forma de representar com precisão o tamanho, o formato 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 frequentemente pressionam a tela como se estivessem fornecendo uma impressão digital à polícia. Sem o rotationAngle, você só saberia a largura e a altura do gesto de toque. Com o rotationAngle, você tem 90 graus de rotação (0 é vertical e 90 é horizontal). Por que apenas 90 graus? Você só precisa dos 90 graus porque, conforme você passa desses ângulos, radiusX e radiusY mudam para se ajustar.

Outra coisa legal é que a área de contato do dedo do usuário muda conforme ele varia o grau de pressão do dedo na tela. Não é uma substituição direta para force, mas é possível distinguir entre toques 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 é o exemplo de pintura de Rick Byers. Para não ficar para trás, veja como usá-lo 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 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 combinar com 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 dedo para fazer um objeto girar.

Todos os dispositivos são compatíveis com isso?

Não. Ainda não é muito comum. Se você tiver um Nexus 10, vai 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 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. Se os valores de raios e rotação estiverem disponíveis, você poderá aprimorar seu aplicativo para oferecer ao usuário uma experiência mais completa. Nem todo usuário tem um tablet Wacom, mas, quando presente, muitos aplicativos de pintura vão aproveitar esse recurso.

E os eventos de ponteiro?

Isso é apenas para garantir que tenhamos uma API de evento de toque totalmente desenvolvida para os desenvolvedores que dependem dela. Viu como eu desviei um pouco da pergunta? Mas, falando sério, se você quiser acompanhar a implementação do PointerEvent do Blink, marque o problema 471824 com uma estrela e leia o documento de acompanhamento de Rick Byers.

Ver também