javascript - 缩放 Canvas jsplumb/fabric.js

Question

我正在使用一个 javascript 库 (jsPlumb)，它为我生成一个状态机，带有连接等。

我正在尝试为生成的图形添加放大和缩小功能。

生成的代码是这样的:

<div id="canvas">
    <canvas style="position: absolute; height: 4px; width: 4px; left: 907.816650390625px; top: 659.816650390625px; " class="_jsPlumb_endpoint  ui-draggable ui-droppable" height="4" width="4"></canvas>
     ...

在 div 包装器中有很多 Canvas 元素。

所以我试图找到一个可以让我轻松缩放所有这些 Canvas 元素的库。

Fabric.js 听起来不错，但我没有找到任何方法来“加载”现有 Canvas 以将转换应用于 Canvas 本身，而只是将转换应用于 Canvas 内的元素。

有谁知道可以做到这一点的图书馆吗？ 或者，如果您曾经为向 jsplumb 添加放大/缩小功能做过一些事情，我也会很高兴! 我特别喜欢 Fabric.js 的解决方案，因为这个库提供了许多有用的其他功能。

谢谢!

Answer 1

如果您正在寻找缩放整个 Canvas 那么这可能会让您感兴趣...

http://jsfiddle.net/Q3TMA/

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

我没有创建 fiddle .. 只是通过对随机事物的一些搜索发现的。希望有帮助