使用fabric.js動態自動scalling畫布在SVG上導出

Question

我正在開發一個簡單的編輯器，可以在畫布上添加/編輯文本和圖像。 我的默認編輯器大小是480x317，但我希望它使用尺寸為1075x709的.toSVG()在SVG上導出。 問題是當我嘗試調整畫布大小並將其導出時。 所有對象都不會縮放到我的畫布大小。 看起來它只是調整實際畫布的大小而不是對象。 在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

面料有內置的方法來做到這一點。

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視口自動處理此選項的選項正在進行中。