Sketch.js移動網頁的繪圖畫布重置ontouch

我使用sketch.js插件在HTML5畫布上繪圖。雖然它在臺式電腦上運行良好，但它在移動瀏覽器上似乎存在一些問題。Sketch.js移動網頁的繪圖畫布重置ontouch

問題是，如果我繪製2個不同的形狀，只要我觸摸它，畫布就會重置爲空白。

只是要完全清除我會和示例：繪製數字'12'將首先繪製'1'，然後當我開始繪製'2'時，畫布將清除並只保留數字'2' ...

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

這就是它。我想知道是否有一些解決方法來保持各種圖紙的歷史。我願意接受任何建議或知道您是否找到類似的問題。

來源

2013-07-04 nuvio

看貼的解決方法由leonth這裏：https://github.com/intridea/sketch.js/issues/1

我做了一個的jsfiddle與解決方法，現在對我的作品在移動設備上：http://jsfiddle.net/ezanker/4hfkb/5/

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

來源

2013-12-02 17:58:06 ezanker

要真正修復這個bug，你需要改變幾行不同的代碼。如果用戶正在使用桌面（mousedown，mousemove，mouseleave，mouseup）或移動設備（touchstart，touchend，touchcancel），則插件會在每個事件中檢查。爲了確定鼠標/手指位置來繪製下一個點，正在調用jQuery的e.pageX。這是直接在移動設備中定義的，因此插件正在檢查移動設備，並且如果檢測到移動設備，則保存用戶的手指位置e.originalEvent.targetTouches[0].pageX。問題來自touchend或touchcancel，因爲未被定義爲這兩個事件，所以e.originalEvent.targetTouches[0].pageX返回一個錯誤，並且整個畫布被重繪。爲了解決這個問題，你需要編輯100/101行左右的兩行代碼。

更換

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

隨着

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; 
}

見下面的答案更多的細節。

Sketch.js pageX undefined error

來源

2014-04-10 00:35:29 Michael

Sketch.js移動網頁的繪圖畫布重置ontouch

回答

相關問題