当我同时在另一个画布中拖动另一个图像时如何移动图像答案

【问题标题】：how to move a image when i drag the other image in the other canvas at same time当我同时在另一个画布中拖动另一个图像时如何移动图像
【发布时间】：2015-03-12 00:14:52
【问题描述】：

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

像这样：

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

当我在另一个画布中拖动另一个图像时，我想移动一个图像。

我的意思是当我拖动一个图像来改变 firstImg 画布中的位置时，我也会同时移动 secondImg 画布中的另一个图像。

有可能吗？

【问题讨论】：

从您正在移动的对象中读取 x/y 属性，将它们应用（设置）到第二个画布上的（复制的）对象上。

标签： javascript jquery canvas html5-canvas fabricjs

【解决方案1】：

您是否正在寻找类似的东西？

我制作了一个简单的函数来在画布上绘制图像。当您拖动图像时，您只需调用两个画布的函数。

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>

【讨论】：