Question

我正在研究可以在画布上添加/编辑文本和图像的简单编辑器。我的默认编辑器大小是480x317，但我希望它使用.toSVG()导出SVG，大小为1075x709。问题是当我尝试调整画布大小并将其导出时。所有对象都不会缩放到我的画布大小。看起来它只是调整实际画布的大小而不是对象。在canvas.js上是否有一个函数可以在画布调整大小后调整对象的大小？以下是jsfiddle

上的示例代码

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

一旦您使用缩放保存恢复正常

Answer 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视口自动处理此选项的选项正在开发中。

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

2 个答案: