Como usar rotationAngle e touchRadius

Paul Kinlan

Uma alteração relativamente pequena na API de toque no Google Chrome aconteceu no Chrome 39, que introduzimos uma versão de trabalho do atributo webkitRotationAngle no TouchEvent. Agora, no Chrome 45 (Beta em julho de 2015), ele não tem o prefixo rotationAngle. deixar nossa implementação mais alinhada com o TouchEvent Spec e Firefox.

Embora já exista há algum tempo, vale a pena explicar o que rotationAngle é porque abre um uso mais interessante do toque. gestos, especialmente em dispositivos móveis.

Tecnicamente, o ângulo de rotação é o número de graus (entre 0 e 90) do a elipse da área de contato definida Touch.radiusX e Touch.radiusY (link em inglês). Legal, né? (Notei que só descobri que o Chrome na O Android não bloqueia os valores radiusX e radiusY como 64 px, mas varia de acordo com o tamanho do contato na tela).

O que isso realmente significa?

Pense nisso como uma forma de representar com precisão o tamanho, a forma e a orientação o dedo do usuário na tela. Os usuários nem sempre tocam na tela com a ponta da ponta do dedo, mas muitas vezes pressionam a tela como se ela estivesse para a polícia uma impressão digital. Sem o rotationAngle, você teria qual era a largura e a altura do gesto de toque. Com a rotationAngle, você recebem 90 graus de rotação, sendo 0 vertical e 90 horizontal. Somente por quê 32 graus? Você só precisa dos 90 graus porque, à medida que você ultrapassa esses ângulos, radiusX e radiusY vão mudar para acomodar.

Outra coisa legal sobre isso é que a área de contato do dedo do usuário muda pois variam o grau de pressão do dedo na tela. Não se trata de um substituição direta de force, mas é possível distinguir entre pincéis de luz na tela, porque terão uma área de superfície menor do que uma pressão com mais força.

Como posso usá-lo?

Primeiro, você precisa de um dispositivo que possa detectar isso. Um Nexus 10 funcionará bem. Um um ótimo exemplo é analisar diretamente Exemplo de pintura de Rick Byers. Não fique para trás mas essa é uma forma de 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 as usuário:

  • Apps da Web de pintura e manipulação de imagens, por exemplo, poderiam usar isso para alterar o traço ou os efeitos aplicados à tela. Você pode use o raio de toque para alterar o tamanho do pincel. Você poderá combinar rotaçãoAngle para variar o ângulo de contato do pincel na tela.
  • Reconhecimento aprimorado de gestos: se você entende o rotaAngle, também pode criar um gesto com um dedo para fazer um objeto girar.

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

Não. Ainda não é muito comum. Se tiver um Nexus 10, poderá verá algo como o seguinte,

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

Crédito da imagem a Rick Byers.

Quando um dispositivo não entende o ângulo de rotação de um toque, o rotationAngle será 0 e os valores radiusX e radiusY serão é igual (mas pode variar dependendo da área atual da superfície sensível ao toque).

Pra que comer isso?

Boa pergunta. Como muitos recursos na Web, essa é uma experiência complementar.
Os eventos de toque funcionarão quando houver suporte e se os valores de raio e de rotação forem você pode aprimorar seu aplicativo para dar ao usuário uma experiência do usuário. Nem todo usuário possui um tablet Wacom, mas quando muitas pessoas pintam os aplicativos vão aproveitá-la.

E os eventos de ponteiro?

Trata-se apenas de garantir um evento de contato completo para os desenvolvedores que contam com ela. Veja como eu desvie um pouco da pergunta... Mais se você tem interesse em acompanhar o PointerEvent da Blink implementação, marque o problema 471824 com estrela e ler Rick Byers documento de acompanhamento.

Ver também