Disegno su tela per pagine Web mobili con sketch.js ripristina ontouch

Question

Sto utilizzando il plug-in sketch.js per disegnare su tela HTML5. Sebbene funzioni bene sui computer desktop, sembra che abbia qualche problema sui browser mobili.

Il problema è che se disegno 2 forme diverse, la tela si resetterà vuota appena la tocco.

Giusto per essere completamente chiaro farò e esempio: disegnare il numero '12' per prima cosa disegnare '1' e poi quando ho iniziare a disegnare '2' la tela sarà chiaro e mantenere solo il numero '2' ...

<!-- CANVAS --> 
<canvas id="canvas1" style="width:100%; background:white; height:150px;"></canvas> 
         <script type="text/javascript"> 
          $(function() { 
           $('#canvas1').sketch(); 
          });            
         </script> 

Questo è tutto. Mi chiedo se ci sia qualche soluzione per mantenere la cronologia dei vari disegni. Sono aperto a qualsiasi suggerimento o sapere se hai riscontrato un problema simile.

Answer 1

Vedere la soluzione postato da leonth qui: https://github.com/intridea/sketch.js/issues/1

ho fatto un jsFiddle con la soluzione ed ora lavora per me su dispositivi mobili: http://jsfiddle.net/ezanker/4hfkb/5/

switch (e.type) { 
    case 'mousedown': 
    case 'touchstart':   
     if (this.painting) { //add 
     this.stopPainting(); //add 
     }      //add 
     this.startPainting(); 
     break; 
... 

Answer 2

Per risolvere in realtà questo bug, è necessario modificare alcune righe di codice diverse. Il plug-in verifica durante ogni evento se l'utente utilizza un desktop (mouse, mouse, mouse, mouse) o mobile (touchstart, touchend, touchcancel). Per determinare la posizione del mouse/dito per disegnare il punto successivo, viene chiamato il numero e.pageX di jQuery. Questo è definito direttamente in mobile, quindi il plug-in verifica se è mobile e se viene rilevato un dispositivo mobile, salvando la posizione del dito dell'utente definita da e.originalEvent.targetTouches[0].pageX. Il problema viene da touchend o touchcancel perché e.originalEvent.targetTouches[0] non è definito per questi due eventi, quindi e.originalEvent.targetTouches[0].pageX restituisce un errore e l'intero canvas viene ridisegnato. Per risolvere questo problema, è necessario modificare 2 righe di codice attorno alla riga 100/101.

Sostituire

e.pageX = e.originalEvent.targetTouches[0].pageX; 
e.pageY = e.originalEvent.targetTouches[0].pageY; 

Con

if (e.originalEvent.targetTouches[0] !== undefined && e.originalEvent.targetTouches[0].pageX!==undefined){ 
    e.pageX = e.originalEvent.targetTouches[0].pageX; 
} 
if (e.originalEvent.targetTouches[0] !== undefined &&e.originalEvent.targetTouches[0].pageY){ 
    e.pageY = e.originalEvent.targetTouches[0].pageY; 
} 

veda la risposta di seguito per maggiori dettagli.

Sketch.js pageX undefined error