Javascript 缩放画布jsplump/fabric.js

我正在使用一个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元素

所以我试图找到一个库，它可以让我轻松地缩放所有这些画布元素

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

有人知道有哪家图书馆能做到这一点吗？ 或者，如果您曾经为jsplumb添加过放大/缩小功能，我也会很高兴！ 我特别想要一个使用Fabric.js的解决方案，因为这个库提供了许多有用的其他函数

---

谢谢

如果您希望缩放整个画布，那么您可能会感兴趣

---

我没有创造小提琴。。只是通过一些随机的搜索找到的。希望这有帮助

我写了一个小lib，它通过缩放和改变视口来扩展fabricjs：

---

示例：

所以，这里是我的解决方案

    function zoomin() {
        zoom += .1;
        zoomIt(1.1);
        $('#zoom_pct').text('%'+Math.round(zoom*100));
    }
    function zoomout() {
        zoom -= .1;
        zoomIt(.9); 
        $('#zoom_pct').text('%'+Math.round(zoom*100));
    }
    function zoomIt(factor) {
        canvas.setHeight(canvas.getHeight() * factor);
        canvas.setWidth(canvas.getWidth() * factor);
        // UPDATE: Scale Background images as well
        if (canvas.backgroundImage) {
            var bi = canvas.backgroundImage;
            bi.width = bi.width * factor; bi.height = bi.height * factor;
        }
// Do we need to scale overlayImage?
        var objects = canvas.getObjects();
        for (var i in objects) {
            var scaleX = objects[i].scaleX;
            var scaleY = objects[i].scaleY;
            var left = objects[i].left;
            var top = objects[i].top;

            var tempScaleX = scaleX * factor;
            var tempScaleY = scaleY * factor;
            var tempLeft = left * factor;
            var tempTop = top * factor;

            objects[i].scaleX = tempScaleX;
            objects[i].scaleY = tempScaleY;
            objects[i].left = tempLeft;
            objects[i].top = tempTop;

            objects[i].setCoords();
        }

        canvas.renderAll();        
    }

---

我来看看这个，看起来很有趣，谢谢！这会使画布变大，但不会缩放画布上可能存在的任何对象。。。画布上的对象会缩放，但画布不会。我一直在尝试将这两种方法混合使用，但它仍然没有按照我预期的方式扩展<代码>canvas.setHeight（canvas.getHeight（）*1.1）；canvas.setWidth（canvas.getWidth（）*1.1）；canvas.setZoom（canvas.viewport.zoom*1.1）objects[I]。setCoords不是一个函数。有什么想法吗？@RickyOdinMatthews你确定你得到的是织物吗？setCoords应该是该对象的有效方法。@JasonMagard感谢您的回复。是的，出于某种原因，如果我使用.forEachObject函数，它会起作用。可能是因为画布被重新启动或其他原因

    function zoomin() {
        zoom += .1;
        zoomIt(1.1);
        $('#zoom_pct').text('%'+Math.round(zoom*100));
    }
    function zoomout() {
        zoom -= .1;
        zoomIt(.9); 
        $('#zoom_pct').text('%'+Math.round(zoom*100));
    }
    function zoomIt(factor) {
        canvas.setHeight(canvas.getHeight() * factor);
        canvas.setWidth(canvas.getWidth() * factor);
        // UPDATE: Scale Background images as well
        if (canvas.backgroundImage) {
            var bi = canvas.backgroundImage;
            bi.width = bi.width * factor; bi.height = bi.height * factor;
        }
// Do we need to scale overlayImage?
        var objects = canvas.getObjects();
        for (var i in objects) {
            var scaleX = objects[i].scaleX;
            var scaleY = objects[i].scaleY;
            var left = objects[i].left;
            var top = objects[i].top;

            var tempScaleX = scaleX * factor;
            var tempScaleY = scaleY * factor;
            var tempLeft = left * factor;
            var tempTop = top * factor;

            objects[i].scaleX = tempScaleX;
            objects[i].scaleY = tempScaleY;
            objects[i].left = tempLeft;
            objects[i].top = tempTop;

            objects[i].setCoords();
        }

        canvas.renderAll();        
    }