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

我正在尝试制作一个画布，可以在上面画画

我正在将AngularJS与角度触摸一起使用，但它似乎经常调用取消事件

我认为这与滑动缓冲区有关，该缓冲区决定是滑动还是滚动，但我不确定如何解决这个问题

下面是我写下的一些代码，它有时会工作，但正如我之前所说的，它是不可靠的

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

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

HTML:

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

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

我认为可以进入Angular Touch.js文件并简单地增加缓冲区大小，但是，有没有更干净的方法呢？ngTouch已经在模块依赖项中，所以它不处理这个问题

更新

---

如果发现was导致它调用cancel，即使它在y方向上移动得比x方向多，并且超出了10px缓冲区。所以我只是在寻找一个干净的方法来增加10px的缓冲区

使用触摸事件集成AngularJS。Ngtouch已经是模块的一部分，我只是展示了简化的代码，就像我说的那样，它只是有缺陷。使用触摸事件集成AngularJS。Ngtouch已经是模块的一部分，我只是展示了简化的代码，就像我说的那样，它只是有缺陷。