Abbiamo già mostrato in un precedente articolo come gestire il multitouch tramte MSPointerEvents, prevedendo un percorso di fallback per i sistemi dotati di mouse o altre periferiche di puntamento classico. La demo che ci apprestiamo ad esaminare, molto semplice in verità, fa anche uso delle funzionalità SVG per disegnare a mano libera su un elemento Canvas, con delle tecniche del tutto analoghe a quelle già affrontate nella demo del Puzzle Game. Non ci soffermeremo pertanto sulla parte grafica, ma approfondiremo la gestione dell'input multitouch estendendolo anche al supporto del browser Safari Mobile di iOS.
Fig. 1 La demo http://bit.ly/nEAh2q
Prima di addentrarci nel codice, occorre fare una considerazione sullo stato attuale dello standard. Al momento, il W3C sta lavorando sulla standardizzazione del supporto multitouch prendendo a modello il draft presentato da Microsoft (http://bit.ly/SXMppO). Questo significa che al momento della ratifica dello standard, è molto probabile che gli altri produttori adotteranno (si spera in tempi brevi) le API che già implementa Internet Explorer 10, magari con modifiche minori. Tuttavia, nella fase di transizione, occorre usare qualche trucco per far sì che il nostro codice sia compatibile anche con le API di Safari che appaiono leggermente più macchinose nella gestione dei punti di tocco multipli.
Il codice
var drawingStarted = false; function DoEvent(eventObject) { if (eventObject.type == "mousedown") { drawingStarted = true; startDraw(eventObject.pageX, eventObject.pageY); } else if (eventObject.type == "mousemove") { if (drawingStarted) {extendDraw(eventObject.pageX, eventObject.pageY); } } else if (eventObject.type == "mouseup") { drawingStarted = false; endDraw(); } } |
Il codice di base è molto elementare. Possiamo distinguere le tre fasi principali di gestione dell'evento di tocco:
1) Inizio con mousedown: viene inizializzato il segmento da tracciare
2) Movimento del puntatore con mousemove: vengono disegnati ulteriori segmenti connessi al precedente punto
3) Rilascio del click con mouseup: la linea spezzata viene terminata
Per adattare questo codice alla gestione di un numero arbitrario di punti di tocco, basta semplicemente sostituire i mouseevents con i corrispondenti MSPointerEvents e trasformare la variabile booleana drawingStarted in un array di booleani, in cui ogni elemento tiene traccia dello stato di un singolo dito. Chiaramente, anche la funzione di disegno dovrà contenere un array di valori, ciascuno dei quali conterrà le coordinate di una diversa linea spezzata, dal momento che verranno disegnate tante linee quanti sono i punti di tocco presenti sullo schermo. Il codice modificato si presenta così:
var drawingStarted = {}; function DoEvent(eventObject) { // the following is needed in developer preview to stop implicit pan/zoom if (eventObject.preventManipulation) eventObject.preventManipulation(); var pointerId = eventObject.pointerId; |
Come possiamo notare, la capacità di IE10 di gestire gli eventi in modo indipendente tramite l'ID del punto di tocco, semplifica notevolmente il lavoro di adattamento del codice. Il browser di sistema di iOS gestisce gli eventi di tocco simultanei, chiamati in questo caso touchevents, in modo leggermente diverso: invece di scatenare un evento per ogni punto di tocco, ciascuno con i propri parametri e le proprie coordinate, impacchetta tutti i punti di tocco in un array e scatena un singolo evento.
Anda sedang membaca artikel tentang
Gestire il multiotuch su tutti i browser
Dengan url
https://ibudanaksehat.blogspot.com/2013/09/gestire-il-multiotuch-su-tutti-i-browser.html
Anda boleh menyebar luaskannya atau mengcopy paste-nya
Gestire il multiotuch su tutti i browser
namun jangan lupa untuk meletakkan link
Gestire il multiotuch su tutti i browser
sebagai sumbernya
0 komentar:
Posting Komentar