fabricjs

Question

目前，我尝试在 fabricjs-framework.

的基础上为可视化编辑器实现 缩放功能

我环顾四周，但越来越困惑，因为我认识到这个 feature/function 的开发对于社区和开发人员来说是一条漫长而崎岖的道路。

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

实施很简单，但它只能 zoom/control canvas（内部）中的对象。 canvas 也不行。但我也想缩放 canvas。（视口内部）

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

有没有办法使用 fabricjs-viewport 插件或其他不过时的解决方案来做到这一点？

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

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

您好，萨沙

Answer 1

您可以使用 feabricjs 在 canvas 上的对象以及 canvas 本身 上创建放大和缩小功能]

为了 zoomIn 和 zoomOut canvas 本身，你应该 改变它的 height 和 width 参数，进入 zoomIn/zoomOut 函数，所以当它去改变对象时，它也会 改变 canvas 尺寸:

放大:

   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));

请查看我制作的实时 fiddle 示例，它放大和缩小对象以及 canvas，.

希望有所帮助，祝你好运

Answer 2

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

我举的一个例子是Here

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