使用 fabric.js 动态自动缩放画布以在 SVG 上导出答案

【问题标题】：Auto scalling of canvas dynamically using fabric.js for export on SVG使用 fabric.js 动态自动缩放画布以在 SVG 上导出
【发布时间】：2014-03-26 14:22:33
【问题描述】：

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

【问题讨论】：

标签： javascript html svg html5-canvas fabricjs

【解决方案1】：

尝试缩放画布

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

保存后通过缩放恢复正常

【讨论】：

【解决方案2】：

fabric 有内置的方法来做到这一点。

var zoom = 4;
canvas.setZoom(zoom);
/* need to enlarge canvas otherwise the svg will be clipped */
canvas.setWidth(canvas.getWidth() * zoom).setHeight(canvas.getHeight() * zoom);
var svg = canvas.toSVG();
/* need to set back canvas dimensions */
canvas.setWidth(canvas.getWidth() / zoom).setHeight(canvas.getHeight() / zoom);

通过 svg 视口自动处理此问题的选项正在开发中。

【讨论】：