用sketch.js重置ontouch绘制移动网页画布

Question

我使用sketch.js插件在HTML5画布上绘图。虽然它在台式机上运行良好，但在移动浏览器上似乎存在一些问题。

问题是，如果我画两种不同的形状，画布一碰到它就会重新设置为空白。

为了完全清楚，我将制作和示例：绘制数字'12‘将首先绘制'1’，然后当我开始绘制'2‘时，画布将清除并且只保留数字’2‘.

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

就是这个。我想知道是否有一些变通办法来保存各种图纸的历史。我愿意接受任何建议，或者知道你是否发现了类似的问题。

Answer 1

要真正修复这个错误，您需要更改几行不同的代码。在每个事件期间，插件都在检查用户是否在使用桌面(鼠标向下，摩丝，鼠标，鼠标)或移动(touchstart，touchend，touchcancel)。要确定绘制下一个点的鼠标/手指位置，将调用jQuery的e.pageX。这是直接定义在手机，所以插件是检查移动，如果手机被检测到，保存用户的手指位置由e.originalEvent.targetTouches[0].pageX定义。这个问题来自于touchend或touchcancel，因为没有为这两个事件定义e.originalEvent.targetTouches[0]，所以e.originalEvent.targetTouches[0].pageX返回一个错误并重新绘制整个画布。要解决这个问题，您需要在第100/101号行周围编辑2行代码。

替换

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

Answer 2

参见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;
...