7

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

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

4

2 回答 2

11

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

于 2014-04-10T00:35:29.997 回答
0

在此处查看 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;
...
于 2013-12-02T17:58:06.713 回答