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

我正在使用

sketch.js

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

问题是如果我画两个不同的形状，画布会在我触摸它时立即重置为空白

为了完全清楚起见，我将制作一个示例：绘制数字“12”将首先绘制“1”，然后当我开始绘制“2”时，画布将清晰，只保留数字“2”

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

$（函数（）{
$（'#canvas1'）。sketch（）；
});                                               

---

就是这样。我想知道是否有一些变通方法来保存各种图形的历史记录。我愿意接受任何建议，或者知道您是否发现了类似问题。

请参阅leonth在此处发布的解决方法：

我使用该解决方案制作了一个JSFIDLE，现在它可以在移动设备上使用：

---

要真正修复这个bug，您需要更改几行不同的代码。插件在每次事件中检查用户是使用桌面（mousedown、mousemove、mouseleave、mouseup）还是移动设备（touchstart、touchend、touchcancel）。要确定绘制下一个点的鼠标/手指位置，将调用jQuery的

e.pageX

。这是在mobile中直接定义的，因此插件正在检查mobile，如果检测到mobile，则保存由

e.originalEvent.targetTouches[0].pageX

定义的用户手指位置。问题来自touchend或touchcancel，因为未为这两个事件定义

e.originalEvent.targetTouches[0]

，因此

e.originalEvent.targetTouches[0]。pageX

返回错误，并重新绘制整个画布。要解决这个问题，您需要在第100/101行周围编辑两行代码

替换

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

与

有关更多详细信息，请参见下面的答案

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