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

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

2 个答案: