javascript - 使用 absolutePan() 通过触摸事件在画布上移动背景图像和元素

Question

我正在使用下一个代码来强制画布的内容跟随屏幕上的手指触摸移动（拖放）。

document.addEventListener('touchmove', function(e){

if(e.targetTouches.length ==1) {

          var canavasMovex=e.targetTouches[0].pageX-canvasLeftofset-canvas.width/2;
          var canavasMovey=e.targetTouches[0].pageY-canvasTopofset-canvas.height/2;
          document.getElementById("a").innerHTML=  canavasMovex;
          document.getElementById("b").innerHTML= canavasMovey;

        var delta = new fabric.Point(-canavasMovex,-canavasMovey);
        canvas.absolutePan(delta);            
     canvas.renderAll();                     
  }    
}, false);

注意：“-canavasMovex,-canavasMovey”值带有负号（我不得不使用它，因为否则画布与手指力矩相反（我认为你可以忽略这个事实，它与偏移量有关，我我试图解决在这里寻求帮助））

我的位置位移与触摸点到画布中心的距离成正比。如果我从屏幕中心开始按下移动，那么位移就不那么明显了。但是，如果我从顶角开始（例如），我会在那个接触点获得画布的中心。从附图中，我尝试考虑“d”参数（触摸点到画布中心的距离），为 canvas.absolutePan() 函数的方程找到正确的值，但没有成功。你能帮我处理这个案子吗？我试图使用浏览互联网的一些解决方案来找到移动画布内容的方法。但是后来我失去了我的应用程序的一些功能，因为“新”库没有与我现有的 fabric.min.js 库正确交互。图像信息（外部矩形-网页，内部矩形-画布）：a-画布偏移量，b-到画布中心的距离，c-触摸点，d-从触摸点到画布中心的距离。所以最后我试图以这种方式完成这项任务。

故障：开始拖动时大于距离“d”，然后偏移量大。（精算师，如果我从画布角开始拖动，画布内容将其中心转移到那里）

标签： javascript

Answer 1

解决方法是获取手指位置，计算与前一个位置的差值，加上前一个位置的差值，最后进行平移。

 var canvasMovexoold = 0;
 var canvasMoveyoold = 0;

document.addEventListener('touchstart', function(e){
    canvasMovexoold = canvasLeftofset+canvas.width/2-e.targetTouches[0].pageX;
    canvasMoveyoold =canvasTopofset+canvas.height/2- e.targetTouches[0].pageY;
}, false);

document.addEventListener('touchmove', function(e){

 if(e.targetTouches.length ==1) {
      var  canvasMovexo += canvasLeftofset+canvas.width/2-e.targetTouches[0].pageX-canvasMovexoold ;
      var  canvasMoveyo +=canvasTopofset+canvas.height/2- e.targetTouches[0].pageY-canvasMoveyoold ;
      var delta = new fabric.Point(canvasMovexo,canvasMoveyo); 
      canvas.absolutePan(delta); 
      canvasMovexoold = canvasLeftofset+canvas.width/2-e.targetTouches[0].pageX;
      canvasMoveyoold =canvasTopofset+canvas.height/2- e.targetTouches[0].pageY;
   }
}, false);