在fabricjs中加载和存储svg文件

时间:2015-04-29 02:27:53

标签: javascript html5-canvas fabricjs

我已经能够整理一个小的测试示例,用于在带有fabricjs的画布上加载和显示SVG文件。

我想要做的是将加载的SVG存储在变量中,以便可以将其添加到svg回调方法范围之外的画布中。我希望能够在程序的整个生命周期中多次向画布添加相同的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); } 未定义。谁能告诉我怎么做到这一点?

ClientConfiguration clientConfig = new ClientConfiguration();
clientConfig.withGzip(ClientConfiguration.DEFAULT_USE_GZIP /*false*/);

1 个答案:

答案 0 :(得分:0)

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

当我们知道它已被加载时,我们可以使用fabric.util.object.clone()克隆该对象并添加到画布。

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