javascript - 如何使用 Fabric.js 实现 Canvas 平移

Question

我有一个 Fabric.js Canvas ，我想实现软件包通常使用“手动”工具执行的全 Canvas 平移。当您按下鼠标按钮之一，然后在按住鼠标按钮的同时在 Canvas 上移动时， Canvas 的可见部分会相应地发生变化。

可以看到in this video我想要实现的目标。

为了实现这个功能我写了下面的代码:

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

但它不起作用。可以看到in this video会发生什么。

如何按顺序修改我的代码:

1. 为了像第一个视频中那样进行平移？

2. 让事件处理器消费事件？它应防止在用户按下或释放鼠标右键时出现上下文菜单。

Answer 1

平移 Fabric Canvas 以响应鼠标移动的一种简单方法是计算鼠标事件之间的光标位移并将其传递给 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);

我们在 mousedown 上开始平移，并在 mousemove 上继续平移。在 mouseup 上，我们取消平移；我们还取消了 mouseup - 取消功能本身。

右键单击菜单，也称为上下文菜单，通过返回 false 取消。菜单取消功能也会自行取消。因此，如果您随后在 Canvas 包装器外部单击，上下文菜单将起作用。

这是演示这种方法的页面:

http://michaellaszlo.com/so/fabric-pan/

您将在 Fabric Canvas 上看到三幅图像(加载图像可能需要一两分钟)。您将能够使用标准的 Fabric 功能。您可以左键单击图像来移动、拉伸(stretch)和旋转它们。但是，当您在 Canvas 容器内右键单击时，您会用鼠标平移整个 Fabric Canvas 。