Un esempio di Canvas, Multi Touch e SVG su Internet Explorer 10

Un esempio di Canvas, Multi Touch e SVG su Internet Explorer 10

Come creare un semplice gioco che combina grafica SVG, interazione multi-touch, e manipolazione di immagini tramite Canvas? Vediamolo insieme in questo articolo

di pubblicato il nel canale Web
 

Segue


Fig. 2 La griglia con le relative dimensioni

Nell’esempio successivo, il codice viene modificato per creare degli oggetti SVG contenenti ciascuno un frammento dell’immagine originale. La modifica è abbastanza semplice, come potete notare:


for (var row = 0; row < NUM_ROWS; row++) {
   for (var col = 0; col < NUM_COLS; col++) {
      ctx.drawImage(image, dx*col, dy*row, dx, dy, 0, 0, dx, dy);
      ctx.strokeRect(0, 0, dx, dy); // Place a border around each tile.

     var svgImage = document.createElementNS('http://www.w3.org/2000/svg', 'image');
     svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", _canvas.toDataURL());
     svgImage.setAttribute('width', dx);
     svgImage.setAttribute('height', dy);
     svgImage.setAttribute('x', dx * col);
     svgImage.setAttribute('y', dy * row);
     svgImage.correctX = dx * col;
     svgImage.correctY = dy * row;
     slicedImageTable.push(svgImage);
   }
}
 

Le immagini incapsulate in SVG ci serviranno per due scopi: rendere fluido il layout sfruttando il rendering proporzionale della viewport e sfruttare l’accelerazione hardware per svolgere in scioltezza questo compito altrimenti molto pesante (con aumento delle performance e risparmio di energia). Quindi impostiamo nel CSS l’altezza di html e body al 100% e centriamo l’elemento SVG:


html, body {
   margin: 0;
   padding: 0;
   height: 100%
}
svg {
   display: block;
   margin: 0 auto;
}
 

La viewport verrà impostata con una dimensione di 400 unità (ci penserà il browser a calcolare il valore in pixel)


<svg width="75%" height="75%" viewbox="0 0 400 400"></svg>
 

Indifferentemente dalle dimensioni in pixel dell’elemento SVG, le coordinate al suo interno faranno sempre riferimento alla viewport. La correlazione tra coordinate a schermo e coordinate in viewport può sembrare ostica da digerire, ma cercheremo di dissolvere eventuali dubbi in un articolo futuro, dedicato alle trasformazioni geometriche con relative formule matematiche e spiegazioni dettagliate. Infine disegnamo le tiles all’interno dell’elemento SVG:


function displaySvgImages() {
   for (var i = 0; i < game.tiles.length; i++) {
      game.svg.appendChild(game.tiles[i]);
   }
}
 

Il prossimo passo consiste nella gestione degli input, e conseguente animazione delle tiles. La tecnica è in realtà molto semplice e consiste nella gestione dei tre principali Pointer Events:

- MSPointerDown (l’utente ha cliccato): salvo in una variabile temporanea il target presente sotto il puntatore

- MSPointerMove (l’utente muove il dito): applico una matrice di traslazione all’oggetto SVG cliccato

- MSPointerUP (l’utente rilascia il dito): rilascio la variabile temporanea e verifico se la posizione della piastrella è corretta

Considerando che posso avere più dita contemporaneamente sullo schermo, la variabile temporanea che tiene traccia delle procedure di drag and drop può essere implementata come un array, in modo da poter memorizzare un numero arbitrario di oggetti e, quindi, di dita sullo schermo con l’unica limitazione dell’hardware del sensore.

Il codice dell’esempio completo è sufficientemente chiaro, anche se troppo lungo per essere riportato per intero qui, in quanto contiene molto codice accessorio per gestire il caso in cui il browser usato non supporti MSPointer* e per gestire punteggi e quant’altro. Pertanto l’invito a leggere il codice sorgente direttamente dal browser è valido anche per questo esempio.
L’esempio completo è visitabile qui: http://samples.msdn.microsoft.com/Workshop/samples/touch/example7.html.

3 Commenti
Gli autori dei commenti, e non la redazione, sono responsabili dei contenuti da loro inseriti - info
biffuz17 Agosto 2013, 11:45 #1
Tutti questi articoli su IE10 stanno cominciando a diventare un po' sospetti. E disattivando AdBlock se ne ha la conferma.
WarSide18 Agosto 2013, 22:36 #2
Usare roba compatibile solo con IE? E' una barzelletta vero?
Boscagoo20 Agosto 2013, 12:07 #3
A me sembra interessante. E' un buon articolo per imparare giocando.

Devi effettuare il login per poter commentare
Se non sei ancora registrato, puoi farlo attraverso questo form.
Se sei già registrato e loggato nel sito, puoi inserire il tuo commento.
Si tenga presente quanto letto nel regolamento, nel rispetto del "quieto vivere".

La discussione è consultabile anche qui, sul forum.
 
^