Question

我正在尝试制作允许绘图的画布。

我正在使用 AngularJS 与 Angular-Touch ，但它似乎经常调用取消事件。

我认为它与滑动缓冲区有关，它决定了它的滑动还是滚动，但我不知道如何解决这个问题。

以下是我放下的一些代码，它有时会起作用，但就像我之前所说的那样，它是不可靠的。

AngularJS：

var canvas=angular.element('canvas');

var canvasCord=function(canvas){
    return angular.element(canvas).offset();
};

var ctx=canvas.getContext('2d');
this.ctx=ctx;

$swipe.bind(angular.element('canvas'),{

    start:function(cord,event){

      event.preventDefault();
      cord=convertCord(cord,event.target);
      ctx.beginPath();
      ctx.moveTo(cord.x,cord.y);
      ctx.lineWidth='5';
      console.log('start');

   },move:function(cord,event){

      event.preventDefault();
      cord=convertCord(cord,event.target);
      ctx.lineTo(cord.x,cord.y);
      ctx.stroke();
      console.log('move');

  },end:function(cord,event){

      event.preventDefault();
      console.log(event);
      console.log(cord);
      cord=convertCord(cord,event.target);
      ctx.lineTo(cord.x,cord.y);
      ctx.stroke();
      console.log('end');

  },cancel:function(event){

      event.preventDefault();
      console.log(event);

  }
},["mouse","touch"]);

var convertCord=function(cord,canvas){

    var offcord=canvasCord(canvas);
    cord.x=cord.x-offcord.left;
    cord.y=cord.y-offcord.top
    console.log(cord);
    return cord;
};

HTML：

<div class='canvas'>
<canvas height='500' width='500'></canvas>
</div>

我认为可以进入 Angular-Touch.js 文件并简单地增加缓冲区大小，但有没有更简洁的方法呢？并且ngTouch已经存在于模块依赖项中，因此它没有处理它。

更新

如果发现它导致它调用取消，即使它在y方向上移动得更多，然后是x并超出10 px缓冲区。所以我只是在寻找一种增加10 px缓冲区的简洁方法。

$ Swipe.Bind在调用移动事件时不可靠 - AngularJS

0 个答案: