Pointer Events su IE10: alcuni esempi pratici

Pointer Events su IE10: alcuni esempi pratici

Analizziamo le demo Microsoft che vanno sotto il nome di TouchEffects e Irish Spring per capire il potenziale messo in campo dagli eventi MSPointer*

di pubblicato il nel canale Web
Microsoft
 

La demo TouchEffects

Abbiamo già avuto modo di parlare degli eventi MSPointer* in un precedente articolo, che invitiamo a leggere nel caso ci si voglia rinfrescare la memoria. Trattandosi di API molto flessibili e relativamente di basso livello, si prestano alla realizzazione di applicazioni interattive e giochi con supporto multitouch. Per esplorare le potenzialità di queste API, analizzeremo un paio di esempi sviluppati da Microsoft nel suo programma IE10 Test Drive.

Nella demo Touch Effects ( disponibile a questo indirizzo: http://ie.microsoft.com/testdrive/Graphics/TouchEffects/ ) viene testata la presenza delle API MSPointer per gestire il multitouch.


Fig. 1 La demo Touch Effects

In assenza di queste API si ricade nella casistica standard di utilizzo con mouse (un solo punto di contatto):


// Determine correct events to register for
      if(navigator.msPointerEnabled) {
      console.log("Pointers supported");
      downevent = "MSPointerDown";
      upevent = "MSPointerUp";
      moveevent = "MSPointerMove";
      document.addEventListener("MSPointerCancel", function(e){
removeTouchPoint(e); }, false);
      document.addEventListener("MSGestureInit", function(e){
if (e.preventManipulation) e.preventManipulation(); }, false);
document.addEventListener("MSHoldVisual", function(e){ e.preventDefault(); }, false);
}
else {
      console.log("Pointers not supported. Defaulting to mouse events.");
      downevent = "mousedown";
      upevent = "mouseup";
      moveevent = "mousemove";
}
 

Le variabili downevent, upevent e moveevent contengono il nome dell’evento (una semplice stringa) da utilizzare, in base al valore della variabile booleana msPointerEnabled. Se tale flag booleano è presente e vale true, allora vengono impostate le API MSPointerDown, MSPointerUp e MSPointerMove, altrimenti vengono usate le vecchie mousedown, mouseup e mousemove. Subito dopo, vengono registrati i relativi eventi per l’interazione con la demo:


// Register invariant events
canvasElm.addEventListener(downevent, addTouchPoint, false);
document.addEventListener(upevent, removeTouchPoint, false);
 

e più in là nel codice vengono tracciati gli eventi di “move” registrando e de-registrando opportunamente le relative funzioni di gestione, in questo modo:


document.addEventListener(moveevent, moveTouchPoint, false);
[…]
document.removeEventListener(moveevent, moveTouchPoint, false);
 

 
 
^