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

Question

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

问题是 ，如果我绘制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>

就是这个。 我想知道是否有一些解决方法来保持各种图纸的历史。 我对任何建议持开放态度，或者知道您是否发现了类似的问题。

Answer 1

要实际修复此错误，您需要更改几行不同的代码。 如果用户正在使用桌面（mousedown，mousemove，mouseleave，mouseup）或移动设备（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未定义错误

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