在 fabricjs 中加载和存储 svg 文件

Question

我已经能够将一个小的测试示例放在一起，用于在 canvas 上使用 fabricjs 加载和显示 SVG 文件。

我想做的是将加载的 SVG 存储在一个变量中，以便可以将其添加到 canvas loadSVGFromURL 回调方法范围之外。我希望能够在程序的整个生命周期中多次将相同的 SVG 添加到 canvas，而不必一次又一次地加载文件。

当我尝试这个时 svg 是未定义的。谁能告诉我该怎么做？

function start(){
    var canvas = new fabric.Canvas('canv');
    canvas.setWidth(800);
    canvas.setHeight(600);
    canvas.hoverCursor = 'normal';

    var svg;

    fabric.loadSVGFromURL('svg/test.svg', function(objects, options) {
        var obj = fabric.util.groupSVGElements(objects, options);
        obj.set({
            left: 50,
            top: 50
        });

        obj.hasControls = false;
        obj.padding = 10;

        canvas.add(obj);      
        svg = obj;
    });

    render();
    canvas.add(svg);

}

function render(){ 
    canvas.renderAll();
    fabric.util.requestAnimFrame(render);
}

Answer 1

我发现loadSVGFromURL是异步的，所以我们需要先确定它已经加载。我们可以调用一个函数来加载对象并将其存储在某个全局命名空间中，例如 SVG。

当我们知道它已经加载时，我们可以使用fabric.util.object.clone()克隆对象并添加到canvas。

var SVG = SVG || {};

function addTestObj() {
    if(SVG.testObject) {
        var clone = fabric.util.object.clone(SVG.testObject);
         clone.set({
             left: x,
             top: y
         });

         canvas.add(clone);
    }
}

function start() {
    var canvas = new fabric.Canvas('canv');
    canvas.setWidth(800);
    canvas.setHeight(600);
    canvas.hoverCursor = 'normal';

    fabric.loadSVGFromURL('svg/test.svg', function(objects, options) {
        var obj = fabric.util.groupSVGElements(objects, options);

        obj.hasControls = false;
        obj.padding = 10;

        SVG.testObject = obj;

    });

    render();

}

function render() { 
    canvas.renderAll();
    fabric.util.requestAnimFrame(render);
}

在 fabricjs 中加载和存储 svg 文件

Loading and storing svg files in fabricjs

javascript

html5-canvas

fabricjs