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

目前，我试图实现一个基于的可视化编辑器的缩放功能

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

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

但是在那一刻我发现了

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

为了更好地理解我在寻找什么，我制作了一个简单的解释图像：

有没有办法用fabricjs视口插件或其他未过时的解决方案做到这一点

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

谢谢你给我的每一个提示和提示，这些提示和提示可以引导我走向正确的方向

您好，

---

Sascha

您可以使用feabricjs在画布上的对象上以及画布本身上创建缩放和移动功能

为了缩放和缩放画布本身，您应该将其高度和宽度参数更改为缩放/缩放功能，因此在更改对象时，还将更改画布大小：

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

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

用于缩放：

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

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

用于zoomOut：

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

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

请看一看我制作的LiveFiddle示例，它缩放对象和画布

现场小提琴示例：

希望有帮助，

---

祝你好运，西奥的解决方案很棒，但有一件事： 不必使用

object.scaleX

和

object.scaleY

缩放画布中的每个对象，只需调用一次

canvas.setZoom（缩放索引）

。 （仅来自fabricjs的1.4.13版）

---

我举了一个很好的例子，谢谢分享！似乎我必须更新我们的代码。相对于比例因子放大时如何更改画布大小？不是答案。这是一个用内部元素而不仅仅是元素缩放画布的问题。