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

【问题标题】：Drawing canvas for mobile webpages with sketch.js resets ontouch使用 sketch.js 为移动网页绘制画布重置 ontouch
【发布时间】：2013-07-04 13:27:36
【问题描述】：

我正在使用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>

就是这样。我想知道是否有一些解决方法来保留各种图纸的历史。我愿意接受任何建议或知道您是否发现了类似的问题。

【问题讨论】：

标签： javascript jquery-mobile html5-canvas

【解决方案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

【讨论】：

【解决方案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;
...

【讨论】：