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

Abbiamo visto in un precedente articolo come sfruttare il supporto SVG per disegnare grafica vettoriale complessa, con annessi filtri grafici accelerati in hardware. Inoltre, abbiamo anche trattato la gestione dei punti di tocco multipli tramite l'API MSPointer ( il riferimento è a questo articolo), compito in realtà abbastanza semplice, che non si discosta molto dalla gestione dei classici eventi del mouse, con l'importante differenza che vengono generati tanti eventi quante sono le dita rilevate dal sensore.

Una volta padroneggiati questi prerequisiti, possiamo mettere insieme le due cose e creare un semplice gioco che combina grafica SVG, interazione multi-touch, e manipolazione di immagini tramite Canvas. Microsoft mette a disposizione degli sviluppatori, tra i meandri della sua sconfinata documentazione MSDN, un progetto d'esempio che ben sintetizza queste tecniche in un classico puzzle game in cui bisogna mettere nell'ordine corretto i vari tasselli in cui è stata scomposta un'immagine.

Fig. 1 Puzzle game d'esempio

Per suddividere l'immagine in piastrelle viene usato il metodo drawImage dell'oggetto Canvas ( si veda anche qui). Questo metodo consente di disegnare una porzione di un'immagine sorgente all'interno un canvas o un'immagine di destinazione. Accetta come parametri l'immagine sorgente, le coordinate e la dimensione del rettangolo da copiare, le coordinate e la dimensione del rettangolo di destinazione. Con un solo metodo, giocando opportunamente con le coordinate e le dimensioni, è possibile disegnare parti di un'immagine traslati e scalati in molti modi.

Questo frammento di codice si occupa di tagliare l'immagine in blocchi e salva i vari pezzi in una tabella temporanea:

//Genera le piastrelle
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); // Disegna il bordo.
      slicedImageTable.push( _canvas.toDataURL() );
   }
}

// Disegnale, sotto forma di tag <img>
for (var r = 0; r < NUM_ROWS; r++) {
   for (var c = 0; c < NUM_COLS; c++) {
      var img = new Image();
      img.src = slicedImageTable.shift(); // restitusce il primo element e lo rimuove dall'array.       Funziona come il "dequeue" di una coda, oppure il "pop" di uno stack
      document.getElementsByTagName('body')[0].appendChild(img);
   }
document.getElementsByTagName('body')[0].appendChild(document.createElement('br'));
}

Per il codice completo, fate riferimento alla pagina di esempio, ricordando di usare l'opzione per mostrare il sorgente della pagina.

Anda sedang membaca artikel tentang

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

Dengan url

http://anakandung.blogspot.com/2013/08/un-esempio-di-canvas-multi-touch-e-svg.html

Anda boleh menyebar luaskannya atau mengcopy paste-nya

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

namun jangan lupa untuk meletakkan link

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

sebagai sumbernya

Baby Lucu