如何使用Fabric.js实现画布平移 [英] How to implement canvas panning with Fabric.js

问题描述

我有一个Fabric.js画布，我想实现软件包通常使用手动"工具进行的全画布平移.按下鼠标键之一，然后在按住鼠标键的同时在画布上移动，画布的可见部分也会相应更改.

I have a Fabric.js canvas and I want to implement the full-canvas panning that software packages usually do with a "hand" tool. It's when you press one of the mouse buttons, then move over the canvas while holding the mouse button and the visible portion of the canvas changes accordingly.

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

You can see in this video what I want to achieve.

为了实现此功能，我编写了以下代码:

In order to implement this functionality I wrote the following code:

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

但是它不起作用.您可以在此视频中看到 会发生什么.

But it doesn't work. You can see in this video what happens.

如何按顺序修改代码:

1. 要像第一个视频一样平移吗?

1. For panning to work like in the first video?

要让事件处理程序使用事件吗?当用户按下或释放鼠标右键时，应避免显示上下文菜单.

For the event handler to consume the event? It should prevent the context menu from appearing when the user presses or releases the right mouse button.

推荐答案

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

An easy way to pan a Fabric canvas in response to mouse movement is to calculate the cursor displacement between mouse events and pass it to relativePan.

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

Observe how we can use the screenX and screenY properties of the previous mouse event to calculate the relative position of the current mouse event:

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 取消功能本身.

We start panning on mousedown and continue panning on mousemove. On mouseup, we cancel the panning; we also cancel the mouseup-cancelling function itself.

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

The right-click menu, also known as the context menu, is cancelled by returning false. The menu-cancelling function also cancels itself. Thus, the context menu will work if you subsequently click outside the canvas wrapper.

以下是演示此方法的页面:

Here is a page demonstrating this approach:

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

您将在Fabric画布上看到三张图像(加载图像可能需要一两分钟).您将能够使用标准的Fabric功能.您可以在图像上单击鼠标左键来移动它们，拉伸它们并旋转它们.但是，当您在画布容器中右键单击时，您将用鼠标平移整个Fabric画布.

You will see three images on a Fabric canvas (it may take a moment or two for the images to load). You'll be able to use the standard Fabric functionality. You can left-click on the images to move them around, stretch them, and rotate them. But when you right-click within the canvas container, you pan the whole Fabric canvas with the mouse.

这篇关于如何使用Fabric.js实现画布平移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！