Vá além do movimento panorâmico, do zoom e do toque com os eventos de gesto

Com base nos comentários de vocês, aperfeiçoamos a forma como os sites podem criar experiências avançadas de toque, usando eventos de gesto no IE10 no Windows 8 Release Preview. Já escrevemos sobre as primeiras etapas que os desenvolvedores da Web devem seguir para garantir que seus sites sejam fáceis de usar com o toque e sobre como criar novas experiências que funcionem bem em todos os dispositivos de entrada, incluindo o multitoque, usando eventos de ponteiro desconhecido para o hardware. Esta postagem aborda os eventos de gesto do IE10. Um exemplo de eventos de gesto é a demonstração de "test drive" Browser Surface (Superfície do Navegador) mostrada abaixo.

Os usuários podem arrastar, pinçar e girar fotos usando a demonstração Browser Surface

O IE10 no Windows 8 Release Preview introduz objetos de reconhecimento de gestos em JavaScript. Os sites podem criar objetos de gesto, decidir quais ponteiros (mouse, caneta ou contatos pelo toque) processar e direcionar os eventos de gesto no elemento desejado. O navegador então calcula qual gesto está sendo realizado e notifica a página por meio dos eventos. Isso permite aos desenvolvedores criar experiências de gesto que ainda não são originalmente possíveis em nenhum outro navegador. Elas incluem gestos múltiplos simultâneos, por exemplo, girar duas peças de jogo com as mãos.

Vamos ver como isso funciona em código.

Criação de um objeto de gesto

A primeira etapa na manipulação de gestos no seu site é criar uma instância de um objeto de gesto.

var myGesture = new MSGesture();

A segunda é atribuir ao gesto um elemento de destino. Esse é o elemento ao qual o navegador disparará eventos de gesto. Ele é também o elemento que determina o espaço de coordenadas para os eventos.

elm = document.getElementById("someElement");

myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);

A última etapa informa ao objeto de gesto quais ponteiros processar em seu reconhecimento de gesto.

elm.addEventListener("MSPointerDown", function (evt) {

// adds the current mouse, pen, or touch contact for gesture recognition

myGesture.addPointer(evt.pointerId);

});

Observação: não se esqueça de que é necessário usar –ms-touch-action para configurar o elemento para que não execute as ações de toque padrão, como o movimento panorâmico e zoom, em vez de produzir eventos de ponteiro para a entrada.

Manipulando eventos de gesto

Quando um objeto de gesto tiver um gesto de destino e, pelo menos, um ponteiro a ele adicionado, ele começará a disparar eventos de gesto. Há dois tipos de eventos de gesto: gestos estáticos (como tocar ou manter pressionado) e gestos dinâmicos (como pinçar, girar ou passar o dedo).

Toque

O reconhecimento de gesto mais básico é o Toque. Quando um toque é detectado, o evento MSGestureTap é disparado no elemento de destino do objeto de gesto. Diferente do evento de clique, o gesto de toque somente é disparado quando um usuário toca (ou pressiona o botão do mouse ou toca uma caneta) e solta sem fazer movimentos sobre a tela. Isso costuma ser útil se você deseja distinguir entre o toque de um usuário em um elemento e a ação de arrastar o elemento.

Pressionar e manter pressionado

Um gesto de pressionar e manter pressionado acontece quando um usuário toca com um dedo, segura por um momento e tira o dedo sem fazer movimentos sobre a tela. Durante a interação de pressionar e manter pressionado, o evento MSGestureHold dispara os vários estados do gesto mais de uma vez:

element.addEventListener("MSGestureHold", handleHold);

function handleHold(evt) {

if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {

// Begin signals the start of a gesture. For the Hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.

}

if (evt.detail & evt.MSGESTURE_FLAG_END) {

// End signals the end of the gesture.

}

if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {

// Cancel signals the user started the gesture but cancelled it. For hold, this occurs when the user drags away before lifting. This flag is sent together with the End flag, signaling the gesture recognition is complete.

}

}

Gestos dinâmicos (pinçar, girar, passar o dedo e arrastar)

Os gestos dinâmicos, como pinçar ou girar, são relatados na forma de transforms semelhantes aos CSS 2D Transforms. Três eventos são disparados para os gestos dinâmicos: MSGestureStart, MSGestureChange (dispara repetidamente enquanto o gesto for mantido) e MSGestureEnd. Cada evento contém informações sobre escala (pinçagem), rotação, translação e velocidade.

Como os gestos dinâmicos relatam transforms, é fácil usar o MSGesture com CSS 2D Transforms para manipular um elemento como uma foto ou peça de quebra-cabeça. Por exemplo, você pode permitir colocar um elemento em escala, girar e arrastá-lo desta forma:

targetElement.addEventListener("MSGestureChange", manipulateElement);

function manipulateElement(e) {

// Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition

// if (e.detail == e.MSGESTURE_FLAG_INERTIA)

// return;

var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS transform on the element

e.target.style.transform = m

.translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture

.rotate(e.rotation * 180 / Math.PI) // Apply Rotation

.scale(e.scale) // Apply Scale

.translate(e.translationX, e.translationY) // Apply Translation

.translate(-e.offsetX, -e.offsetY); // Move the transform origin back

}

Os gestos dinâmicos, como a escala e a rotação podem ser realizados com o mouse, girando a roda de rolagem com as teclas modificadoras CTRL ou SHIFT.

Resumo

Os eventos de gesto do IE10 permitem que você crie experiências de toque que, no momento, não são possíveis em nenhum outro navegador. Consulte o MSDN para obter uma documentação detalhada dos MSGesture objetos e MSGesture eventos.

Permita que os seus sites vão além do movimento panorâmico, do zoom e do toque com os eventos de gesto.

—Jacob Rossi, gerente de programas, Internet Explorer