如何在 fabric.js 中创建视口

Question

如何使用画布创建一个可见区域，一个更大对象的窗口（用于创建可滚动视图），最好使用fabric.js

Answer 1

如果我正确理解您的问题，最简单的方法是创建一个非常大的画布对象（大于您的窗口），并将其放在父容器中。将父容器的尺寸设置为您想要的窗口大小，然后在容器上声明overflow: hidden;。

设置完成后，您可能可以使用 jQuery 的 draggable 之类的东西来处理鼠标事件。如果这不起作用，关键是您需要修改画布的position 属性，或调整margins 以模拟在窗口内围绕画布进行平移。

这种方法当然适用于有限的画布尺寸。如果你想提供一个无限的工作区，你最好修改画布的context.translate 属性。但是，我想这与fabric.js 不能很好地配合。