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 Irish Spring

Nella seconda demo Irish Spring ( disponibile a questo indirizzo: http://ie.microsoft.com/testdrive/Performance/IrishSpring/), ci viene presentata la stessa tecnica per la gestione del multitouch, ma risulta interessante vedere come la parte di disegno sia un misto tra immagini raster disegnate con drawImage e figure vettoriali tracciate con vari comandi di disegno circondati dalla coppia beginPath() / closePath():


Fig. 2 Demo Irish Spring


function drawLeaf(x, y, scale, rotation, gradient, id) {
[…]

// vettoriale
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(0, 0, 2.4, 14.6, 17.6, 5.8);
ctx.bezierCurveTo(17.6, 5.8, 11, -11.9, 0, 0);
ctx.closePath();

[…]
}

function drawClover(x, y, scale, rotation, id) {
[…]

// raster
ctx.drawImage(images[0], -6.25, .85);

// vettoriale
ctx.beginPath();
ctx.arc(0, 0, 5.65, 0, Math.PI * 2, false);
ctx.closePath();

ctx.fillStyle = "rgb(67, 155, 69)";
ctx.fill();

// raster
ctx.drawImage(images[1], -23.75, -45.25);
ctx.drawImage(images[2], -43.55, -34.45);
ctx.drawImage(images[3], -49.55, -5.95);
ctx.drawImage(images[4], -37.55, 2.05);
ctx.drawImage(images[5], 1.35, -40.35);
ctx.drawImage(images[6], 3.55, -22.95);
ctx.drawImage(images[7], 3.55, -0.25);
ctx.drawImage(images[8], -6.25, 2.85);

}
 

Le tecniche qui illustrate possono essere riciclate per la realizzazione di siti multimediali complessi e giochi, riuscendo con poco sforzo a supportare tutti i maggiori browser in circolazione. Quando l’API MSPointer verrà standardizzata e adottata da tutti i produttori, il codice di setup potrà essere ulteriormente semplificato, non dovendo più distinguere tra mouseevent e pointerevent.



 

1 Commenti
Gli autori dei commenti, e non la redazione, sono responsabili dei contenuti da loro inseriti - info
Boscagoo29 Agosto 2013, 16:38 #1
Bellissimi questi esempi...spunti per imparare e migliorare!

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.
 
^