如何使用fabric.js向（可能无限的）画布添加滚动条

Question

我在这里可能会丢失一些东西（我绝不是HTML或CSS的专家，而只是刚刚开始使用Fabric）。

看来，fabric是用于创建基于形状（对象）的绘图应用程序的好工具，但我无法弄清楚如何使用它，以免用户将对象放在画布上而丢失对象。

没有一个演示程序具有阻止此功能的任何功能，但这似乎会对框架造成巨大限制。 有谁知道解决这个问题的方法吗？

本质上，我想允许用户将对象任意添加到画布，并且为了可用性，这些对象将必须隔开，因此画布将必须是无限的。 显然，画布的交互区域必须具有固定的大小。

对这种排序的任何帮助将不胜枚举

Answer 1

我们遇到了同样的问题，并通过创建视口来解决。 我们围绕画布div创建了一个div。 <div id="viewport"> <div id="canvas"></div> </div>

CSS：

#viewport {
  height: 500px;
  left: 0;
  position: absolute;
  top: 0;
  width: 500px; 
  overflow: auto;
}

JS创建画布：

var canvas = new fabric.Canvas('canvas');
 canvas.setWidth(1000);
 canvas.setHeight(1000);
 canvas.renderAll();

现在您应该可以在画布上滚动。 但是，您将意识到鼠标位置不再正确。 您可以使用canvas.calcOffset（）方法修复该问题，并将其绑定到例如视口的scroll事件。 希望这可以帮助。

Answer 2

添加到Benicks的答案-您可以调用canvas.on("object:moving", function(e) {}) ，该对象在移动对象时触发。 因此包装器将具有以下CSS：

  #wrapper{
    position: absolute;
    overflow: auto;
    max-height: 600px;
    max-width: 800px;
   }

带有索引文件：

<div id="wrapper">
  <canvas id="c2"></canvas>
</div>

要在将对象拖动到包装器的边缘时展开画布，可以执行以下操作（在coffee脚本中完成）：

 canvas.on "object:moving", (e) -> 
  currentCanvasHeight = canvas.height
  currentCanvasWidth = canvas.width

  # e.target returns the selected canvas object
  # Once the objects offset left value + the objects width is greater than the canvas
  # width, expand the canvas width
  if (e.target.left + e.target.currentWidth) > currentCanvasWidth
    canvas.setWidth currentCanvasWidth + 50
    $("#wrapper").scrollLeft e.target.left # scroll alongside the canvas expansion
    $('#wrapper').on 'scroll', canvas.calcOffset.bind(canvas) # to fix the mouse 
    #position bug issue 

  # do the same for the top
  if (e.target.top + e.target.currentHeight) > currentCanvasHeight
    canvas.setHeight currentCanvasHeight + 50
    $("#wrapper").scrollTop e.target.top 
    $('#wrapper').on 'scroll', canvas.calcOffset.bind(canvas)