如何在同一时间拖动其他画布中的其他图像时移动图像

Question

我正在使用fabric.js处理两个画布。我还设置了两个画布来比较同一页面中的两幅图像。

这样的：

<canvas id="firstImg" width="843" height="1200"></canvas> <canvas id="secondImg" width="843" height="1200"></canvas>

我希望当我在其他画布拖动其他图像移动图像。

我的意思是，当我拖动图像来改变firstImg画布中的位置时，我也同时将其他图像移动到secondImg画布中。

有没有可能？

Answer 1

你是否在寻找类似的东西？

我已经做了一个简单的功能，在canavs上绘制图像。拖动图像时，只需调用两个画布的函数即可。

http://jsfiddle.net/Niddro/96rdnv3L/

var canvasOne = document.getElementById("canvasOne"); 
 
var ctxOne = canvasOne.getContext("2d"); 
 

 
var canvasTwo = document.getElementById("canvasTwo"); 
 
var ctxTwo = canvasTwo.getContext("2d"); 
 

 
var mouseX=0; 
 
var mouseY=0; 
 
var imageX=0; 
 
var imageY=0; 
 
var drag = false; 
 
canvasOne.addEventListener("mousedown", function(){drag=true;}, false); 
 
canvasOne.addEventListener("mouseup", function(){drag=false;}, false); 
 
canvasOne.addEventListener("mousemove", moveImage, false); 
 

 
var myImage = new Image(); 
 
myImage.src = "http://home.niddro.com/HTML5/flxprt/img/logo_orange_small.png"; 
 

 
function moveImage(event) { 
 
    if (drag) { 
 
     var x = new Number(); 
 
     var y = new Number(); 
 
     var canvas = document.getElementById("canvasOne"); 
 
    
 
     if (event.x != undefined && event.y != undefined) 
 
     { 
 
      x = event.x; 
 
      y = event.y; 
 
     } 
 
     else // Firefox method to get the position 
 
     { 
 
      x = event.clientX + document.body.scrollLeft + 
 
       document.documentElement.scrollLeft; 
 
      y = event.clientY + document.body.scrollTop + 
 
       document.documentElement.scrollTop; 
 
     } 
 
    
 
     x -= canvas.offsetLeft; 
 
     y -= canvas.offsetTop; 
 
     var deltaX = mouseX-x; 
 
     var deltaY = mouseY-y; 
 
     drawImage(imageX-deltaX,imageY-deltaY,ctxOne,canvasOne,myImage); 
 
     drawImage(imageX-deltaX,imageY-deltaY,ctxTwo,canvasTwo,myImage); 
 
     
 
    } 
 
} 
 

 
drawImage(imageX,imageY,ctxOne,canvasOne,myImage); 
 
drawImage(imageX,imageY,ctxTwo,canvasTwo,myImage); 
 

 

 
function drawImage(x,y,ctx,canvas,img) { 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 
    ctx.drawImage(img,x,y); 
 
}

canvas { 
 
    border: 1px solid black; 
 
}

<canvas id="canvasOne" width="500" height="300"></canvas><br /> 
 
<canvas id="canvasTwo" width="500" height="300"></canvas>