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

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

就是这个.我想知道是否有一些解决方法来保持各种图纸的历史.我对任何建议持开放态度,或者知道您是否发现了类似的问题.

解决方法

要实际修复此错误,您需要更改几行不同的代码.如果用户正在使用桌面(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