javascript - 如何使用 fabric.js 将滚动条添加到(可能是无限的) Canvas

Question

我可能在这里遗漏了一些东西(我绝不是 HTML 或 CSS 专家，而且才刚刚开始使用 fabric)。

似乎 fabric 是创建基于形状(对象)的绘图应用程序的好工具，但我不知道如何使用它，使用户不会因为将对象从 Canvas 上移开而丢失对象.

所有演示都没有任何功能可以防止这种情况发生，但这似乎是对框架的巨大限制。有人知道解决这个问题的方法吗？

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

任何帮助解决这个问题的人都将不胜感激

Answer 1

添加到 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>

要在将对象拖到包装器边缘时扩展 Canvas ，您可以执行以下操作(在 CoffeeScript 中完成):

 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)