1

我正在尝试制作一个允许在其上绘图的画布。

我正在使用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 缓冲区的干净方法。

4

0 回答 0