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

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

问题是如果我画两个不同的形状，一旦我触摸画布，它就会重置为空白。

为了完全清楚，我会做并且example：绘制数字“12”将首先绘制“1”，然后当我开始绘制“2”时，画布将清除并仅保留数字“2”...

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

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

要真正修复此错误，您需要更改几行不同的代码。该插件在每个事件期间检查用户是否使用桌面（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 行代码。

Replace

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

With

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 未定义错误 https://stackoverflow.com/questions/21311073/sketch-js-pagex-undefined-error/22976319#22976319