Загрузка и хранение файлов svg в fabricjs

Question

Мне удалось собрать небольшой пример для загрузки и отображения SVG-файлов на холсте с помощью fabricjs.

Что я хотел бы сделать, это сохранить загруженный 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); 
}