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

Question

如何使用 Canvas 创建一个可见区域，一个更大对象的窗口(用于创建可 ScrollView )，最好使用 fabric.js

Answer 1

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

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

这种方法当然适用于有限的 Canvas 尺寸。如果您想提供一个无限大的工作区，您最好修改 Canvas 的 context.translate 属性。不过，我想这不会很好地与 fabric.js 配合使用。