html - 如何在 fabric.js 中创建视口

Question

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

Answer 1

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

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

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