关于javascript：fabricjs-在视口中缩放画布(可能吗？)


fabricjs - Zoom canvas in viewport (possible?)

目前，我尝试为基于fabric.js框架的可视化编辑器实现缩放功能。

我环顾四周，但变得越来越困惑，因为我认识到此功能/功能的开发对于社区和开发人员而言是漫长而艰难的道路。

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

但是此刻，我在Github上发现了RTSGroup开发的fabric-viewport。

该实现很容易，但是它只能缩放/控制画布(内部)中的对象。也不是画布。但是我也想放大画布。 (视口内部)

为了更好地理解我要寻找的内容，我做了一个简单的解释图像：

Example

有没有一种方法可以使用fabricjs-viewport插件或其他未过时的解决方案？

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

已经感谢您的所有提示和技巧，可能会引导我朝正确的方向前进。

问候，
萨沙

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

我做的一个例子在这里

相关讨论

您可以使用feabricjs在画布上的对象以及画布本身上创建zoomIn和zoomOut功能

为了对画布本身进行zoomIn和zoomOut，应将其高度和宽度参数更改为zoomIn / zoomOut函数，因此，当要更改对象时，它也会更改画布的大小：

用于放大：

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

对于zoomOut：

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

请看一下我制作的现场小提琴示例，该示例可以放大和缩小对象以及画布。

现场小提琴示例：http://jsfiddle.net/tornado1979/39up3jcm/

希望有帮助，
祝好运