fabricjs 拖动画布

在 Fabric.js 中，拖动画布通常涉及到监听鼠标事件（如 `mousedown`, `mousemove`, 和 `mouseup`）并处理它们来改变画布的位置。以下是一个简单的例子，展示了如何实现画布的拖动功能：

var canvas = new fabric.Canvas('myCanvas');

canvas.on('mousedown', function(e) {
    canvas.isDragging = true;
    var offset = canvas.getOffsetLeft() + e.offsetX - canvas.getWidth() / 2,
        top = canvas.getOffsetTop() + e.offsetY - canvas.getHeight() / 2;
    fabric.util.addListener(document, 'mousemove', onMouseMove);
    fabric.util.addListener(document, 'mouseup', onMouseUp);
});

function onMouseMove(e) {
    if (!canvas.isDragging) return;
    canvas.setViewport({ left: e.clientX - offset, top: e.clientY - top });
}

function onMouseUp(e) {
    canvas.isDragging = false;
    fabric.util.removeListener(document, 'mousemove', onMouseMove);
    fabric.util.removeListener(document, 'mouseup', onMouseUp);
}

在这个例子中，当用户点击画布时，开始监听鼠标移动 (`mousemove`) 和释放 (`mouseup`) 事件。`onMouseMove` 函数会在用户移动鼠标时更新画布视口的位置，使得整个画布随着鼠标一起移动。当鼠标松开时，停止监听事件并取消拖动状态。