將Fabric JS中的畫布平移限制到邊界？

Question

我已經使用Fabric JS canvas通過以下代碼實現了panning：

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);
  }
});

這可以正常工作，但您可以在任何方向上無限滾動/平移。 我想將其限制為邊界，以便較小的畫布實際上是較大繪圖區域上的視圖。 例如400 X 400像素的畫布，它不允許您平移超過1000 X 1000像素的區域。 我已經在Fabric JS畫布對象中看到一個viewportTransform[]數組，該數組在字段[0]中保持縮放級別，在字段[4]和[5]中保持X和Y偏移，但是不確定如何最好地實現平移邊界。 是否有可以使這項工作有效的結構函數？

我還必須考慮縮放級別（我正在使用canvas.setZoom() ），也不希望用戶將對象拖動到平移邊界之外（這可能是一個單獨的問題！）。

有什么想法嗎？

謝謝！

Answer 1

FabricJS網頁上已經有關於它的教程，它可以通過鼠標滾輪使用，但是您可以對其進行調整： http : //fabricjs.com/fabric-intro-part-5

我用一些按鈕做到了。

首先，我必須告訴您縮放和平移會影響畫布的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]

底部：影響索引5 panningViewporTransform（6）[1.728，0，0，1.728，0，-241] panningViewporTransform（6）[1.728，0，0，1.728，0，-242]

頁首：影響索引5 panningViewporTransform（6）[1.728，0，0，1.728，0，305] panningViewporTransform（6）[1.728，0，0，1.728，0，306]

這是我在四個方向上使用按鈕控制平移的功能。 要限制頂部和左側平移，只要將相應的視口設置為0即可。 關於左右平移時，必須輸入要考慮的邊界的數字大小。 我當時正在考慮畫布的大小，但是您可以使用所需的任何大小。

...
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);

    }

 }