如何使用Fabric.js实现画布平移

我有一个Fabric.js画布,我想实现软件包通常使用"手动"工具进行的全画布平移.当您按下其中一个鼠标按钮,然后在按住鼠标按钮的同时在画布上移动,并且画布的可见部分会相应地更改.

您可以在此视频中看到我想要实现的目标.

为了实现这个功能,我编写了以下代码:

$(canvas.wrapperEl).on('mousemove', function(evt) {
    if (evt.button == 2) { // 2 is the right mouse button
        canvas.absolutePan({
            x: evt.clientX,
            y: evt.clientY
        });
    }
});

但它不起作用.你可以在这个视频中看到会发生什么.

如何按顺序修改代码:

如果像第一个视频一样平移工作？

对于事件处理程序来消耗事件？当用户按下或释放鼠标右键时,它应该阻止上下文菜单出现.

Michael Lasz.. 14

平移Fabric画布以响应鼠标移动的简单方法是计算鼠标事件之间的光标位移并将其传递给relativePan.

观察我们如何使用前一个鼠标事件的screenX和screenY属性来计算当前鼠标事件的相对位置:

function startPan(event) {
  if (event.button != 2) {
    return;
  }
  var x0 = event.screenX,
      y0 = event.screenY;
  function continuePan(event) {
    var x = event.screenX,
        y = event.screenY;
    fc.relativePan({ x: x - x0, y: y - y0 });
    x0 = x;
    y0 = y;
  }
  function stopPan(event) {
    $(window).off('mousemove', continuePan);
    $(window).off('mouseup', stopPan);
  };
  $(window).mousemove(continuePan);
  $(window).mouseup(stopPan);
  $(window).contextmenu(cancelMenu);
};
function cancelMenu() {
  $(window).off('contextmenu', cancelMenu);
  return false;
}
$(canvasWrapper).mousedown(startPan);

function startPan(event) {
  if (event.button != 2) {
    return;
  }
  var x0 = event.screenX,
      y0 = event.screenY;
  function continuePan(event) {
    var x = event.screenX,
        y = event.screenY;
    fc.relativePan({ x: x - x0, y: y - y0 });
    x0 = x;
    y0 = y;
  }
  function stopPan(event) {
    $(window).off('mousemove', continuePan);
    $(window).off('mouseup', stopPan);
  };
  $(window).mousemove(continuePan);
  $(window).mouseup(stopPan);
  $(window).contextmenu(cancelMenu);
};
function cancelMenu() {
  $(window).off('contextmenu', cancelMenu);
  return false;
}
$(canvasWrapper).mousedown(startPan);