在fabricjs中加載和存儲svg文件

Question

我已經能夠將一個小測試示例放在一起，用於在fabricjs的畫布上加載和顯示SVG文件。

我想要做的是將加載的SVG存儲在一個變量中，以便可以將其添加到loadSVGFromURL回調方法範圍之外的畫布上。我希望能夠在程序的整個生命週期內多次將相同的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); 
} 

Answer 1

我發現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); 
}