javascript - 将 Fabric JS 中的 Canvas 平移限制到边界？

Question

我已经使用 Fabric JS Canvas 实现了 Canvas 平移，使用以下代码:

canvas.on("mouse:down", function(e) {
  panning = true;
});

canvas.on("mouse:up", function(e) {
  panning = false;
});

canvas.on("mouse:move", function(e) {
  if (panning) {
    var delta = new fabric.Point(e.e.movementX, e.e.movementY);
    canvas.relativePan(delta);
  }
});

这很好用，但您可以向任何方向无限滚动/平移。我想将其限制在一个边界内，以便较小的 Canvas 实际上是较大绘图区域上的 View 。例如 400 X 400 像素的 Canvas ，它不允许您平移超过 1000 X 1000 像素的区域。我在 Fabric JS canvas 对象中看到有一个 viewportTransform[] 数组，它在字段 [0] 中保存缩放级别，在字段 [4] 和 [5] 中保存 X 和 Y 偏移，但不确定如何最好实现平移边界。是否有 Fabric 函数可以使这项工作正常进行？

我还必须考虑缩放级别(我正在使用 canvas.setZoom())并且不希望用户将对象拖动到平移边界之外(这可能是一个单独的问题!)。

有什么想法吗？

谢谢!

Answer 1

在 FabricJS 网页上已经有关于它的教程，它可以与鼠标滚轮一起使用，但您可以对其进行调整:http://fabricjs.com/fabric-intro-part-5

我用一些按钮做到了。

首先我必须告诉你，缩放和平移会影响 Canvas 的 viewportTransform 属性，它是一个矩阵，类似于 css transform 属性的工作方式(或者我相信是这样......)。

这些是我在工作时在控制台中得到的一些输出:

originalViewporTransform (6) [1, 0, 0, 1, 0, 0]

缩放影响索引 0 和 3

zoomViewporTransform (6) [1.2, 0, 0, 1.2, 0, 0]zoomViewporTransform (6) [1.44, 0, 0, 1.44, 0, 0]

平移

右:影响索引 4

panningViewporTransform (6) [1.44, 0, 0, 1.44, -82, 0]panningViewporTransform (6) [1.44, 0, 0, 1.44, -83, 0]

左:影响索引 4

panningViewporTransform (6) [1.728, 0, 0, 1.728, 259, 0]panningViewporTransform (6) [1.728, 0, 0, 1.728, 260, 0]

底部:影响指数 5panningViewporTransform (6) [1.728, 0, 0, 1.728, 0, -241]panningViewporTransform (6) [1.728, 0, 0, 1.728, 0, -242]

顶部:影响指数 5panningViewporTransform (6) [1.728, 0, 0, 1.728, 0, 305]panningViewporTransform (6) [1.728, 0, 0, 1.728, 0, 306]

下面是我的函数，它可以在四个方向上使用按钮控制平移。要限制顶部和左侧平移，您只需在较大时将相应的视口(viewport)设置为 0。当是右平移和底部平移时，您必须输入您正在考虑的边界的数字大小。我正在考虑 Canvas 的大小，但您可以使用任何您想要的大小。

...
else if (this.actualCanvasViewportTransform[4] < this.canvas.getWidth() - (this.canvas.getWidth() * this.actualCanvasZoom))
...

在这些行中，您必须将 (this.canvas.getWidth() * this.actualCanvasZoom) 更改为您想要的大小，就像这样

(pxLimitRight * this.actualCanvasZoom)

希望对你有帮助

whileMouseDown(caseType){

   if (this.actualCanvasZoom <= this.originalCanvasZoom) return;

   const units = 1;
   let   delta;

   switch (caseType) {
      case 'right':
        delta = new fabric.Point(-units,0);
        break;
      case 'left':
        delta = new fabric.Point(units,0);
        break;
      case 'bottom':
        delta = new fabric.Point(0,-units);
        break;
      case 'top':
        delta = new fabric.Point(0,units);
        break;
    }

this.canvas.relativePan(delta);

// console.log('panningViewporTransform', this.canvas.viewportTransform, this.actualCanvasZoom);

    this.actualCanvasViewportTransform = this.canvas.viewportTransform;

    /*
    WE ARE PANNING LEFT AND RIGHT
    */
    if (this.actualCanvasViewportTransform[4] >= 0) {
      // WE ARE GOING LEFT
      this.actualCanvasViewportTransform[4] = 0;

    } else if (this.actualCanvasViewportTransform[4] < this.canvas.getWidth() - (this.canvas.getWidth() * this.actualCanvasZoom)) 
    {
      // WE ARE GOING RIGHT
      this.actualCanvasViewportTransform[4] = this.canvas.getWidth() - (this.canvas.getWidth() * this.actualCanvasZoom);

    }


    /*
    WE ARE PANNING DOWN AND UP
    */
    if (this.actualCanvasViewportTransform[5] >= 0) {
      // WE ARE GOING UP
      this.actualCanvasViewportTransform[5] = 0;

    } else if (this.actualCanvasViewportTransform[5] < this.canvas.getHeight() - (this.canvas.getHeight() * this.actualCanvasZoom)) {
      // WE ARE GOING DOWN
      this.actualCanvasViewportTransform[5] = this.canvas.getHeight() - (this.canvas.getHeight() * this.actualCanvasZoom);

    }

 }