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:

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