fabricjs - 在视口中缩放画布（可能吗？）

Question

目前我尝试根据fabricjs-framework向可视化编辑器实施 zoom-functionallity 。

我环顾四周但越来越困惑，因为我认识到这个功能/功能的开发对于社区和开发者来说是漫长而艰难的道路。

正因为如此，许多解决方案似乎已经过时了。

但此刻我找到fabric-viewport developed by the RTSGroup on Github。

实现很简单，但它只能缩放/控制画布（内部）中的对象。不是画布。但我也想放大画布。 （视口内部）

为了更好地理解我正在寻找的东西，我做了一个简单的解释 - 图片：

有没有办法使用fabricjs-viewport插件或其他不过时的解决方案？

我已经看到一些页面使用这样的视口，例如缩放功能和滚动支持。但我不确定它们是否属于 fabricjs-framework 。

非常感谢每一个提示和tipp，它可以引导我走向正确的方向。

问候， 萨沙

Answer 1

@Theo解决方案很棒，但有一点： 您可以只调用一次object.scaleX，而不是使用object.scaleY和canvas.setZoom(ZOOM_INDEX)来缩放画布中的每个对象。 （仅来自fabricjs的1.4.13版本）

我做的一个例子是Here

Answer 2

你可以创建zoomIn＆amp; zoomOut功能，feabricjs 可以放在画布上的对象上，也可以放在画布本身上

为了 zoomIn和zoomOut 画布本身，你应该更改其高度和宽度参数，进入zoomIn / zoomOut函数，所以当它改变对象时，它也会改变画布大小：

for zoomIn ：

   canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
   canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

for zoomOut ：

canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));

请看一下我制作的实况小提琴示例，它放大和放出对象和画布，。

实况小提琴示例：http://jsfiddle.net/tornado1979/39up3jcm/

希望有帮助， 祝你好运