javascript - 使用 Fabric.js 动态自动缩放 Canvas 以在 SVG 上导出

Question

我正在开发简单的编辑器，可以在 Canvas 上添加/编辑文本和图像。我的默认编辑器大小是 480x317，但我希望它使用 .toSVG() 导出为 SVG，尺寸更大为 1075x709。问题是当我尝试调整 Canvas 大小并将其导出时。所有对象都无法缩放到我的 Canvas 尺寸。看起来它只是调整实际 Canvas 的大小，而不是对象的大小。 Fabric.js 上是否有一个函数可以在 Canvas 调整大小后调整对象的大小？这是 jsfiddle 上的示例代码

Answer 1

尝试缩放 Canvas

    var originWidth = canvas.getWidth();

function zoom (width, height)
    {

        var scale = width / canvas.getWidth();
        height = scale * canvas.getHeight();

        canvas.setDimensions({
            "width": width,
            "height": height
        });

        canvas.calcOffset();
        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;

            objects[i].scaleX = scaleX * scale;
            objects[i].scaleY = scaleY * scale;
            objects[i].left = left * scale;
            objects[i].top = top * scale;

            objects[i].setCoords();
        }

        canvas.renderAll();

}

zoom (5000);

保存后通过缩放恢复正常