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

Question

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

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

Answer 1

要实际修复此错误,您需要更改几行不同的代码.如果用户正在使用桌面(mousedown,mousemove,mouseleave,mouseup)或移动设备(touchstart,touchend,touchcancel),则插件会在每个事件期间进行检查.要确定用于绘制下一个点的鼠标/手指位置,e.pageX正在调用jQuery .这是在移动设备中直接定义的,因此插件正在检查移动设备,如果检测到移动设备,则保存用户定义的手指位置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未定义错误

Answer 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;
...