如何在同一時間拖動其他畫布中的其他圖像時移動圖像

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>