javascript - 使用 sketch.js 为移动网页绘制 Canvas 会在触摸时重置

Question

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

问题是，如果我绘制 2 个不同的形状，我一触摸它， Canvas 就会重置为空白。

为了完全清楚，我将制作示例:绘制数字“12”将首先绘制“1”，然后当我开始绘制“2”时， Canvas 将清除并仅保留数字“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 返回一个错误，整个 Canvas 被重绘。要解决此问题，您需要在第 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