如何在fabric.js中创建视口

Question

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

Answer 1

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

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

这种方法当然适用于有限的画布尺寸。如果您想提供无限的工作区，那么最好修改画布的context.translate属性。我想这对于fabric.js来说不会很好。