fabric js clone path-group type object

Question

Я пытаюсь в fabricJs клонировать объект SVG. Сначала это нормально, но затем клонирует 2 раза и 4 и так далее. Я не могу найти решение моей проблемы.

Вот что я пробовал:

$('#duplicate-item').on('click', function(event) { 
    event.preventDefault(); 
    var obj = selectedObject; 
    if (fabric.util.getKlass(obj.type).async) { 
     obj.clone(function (clone) { 
      clone.set({ 
       left: 200, 
       top: 100 
      }); 
      canvas.add(clone); 
     }); 
    } 
}); 

Answer 1

я добавлен небольшой код, который загружает изображение svg и добавляет его на холст. аналогичным образом (выберите svg и нажмите кнопку), вы можете клонировать объект svg. Надеюсь, что это поможет.

var site_url = 'http://fabricjs.com/assets/1.svg'; 

fabric.loadSVGFromURL(site_url, function(objects) { 
      var group = new fabric.PathGroup(objects, { 
      left: 165, 
      top: 100, 
      width: 295, 
      height: 211 
     }); 
     canvas.add(group); 
     canvas.renderAll(); 
      }); 

живой пример: http://jsfiddle.net/tornado1979/0fbefh52/4/

Answer 2

, пожалуйста, посмотрите на мой exampe в jsfiddle, это то, что вам нужно. jsfiddle: http://jsfiddle.net/tornado1979/0fbefh52/1/

и это код, вы выбираете объект, а затем нажать кнопку клонировать:

HTML:

<button id="duplicate-item">clone object</button> 
<canvas id="c" width="400" height="400"></canvas> 

ЯШ:

var canvas = new fabric.Canvas('c'); 

var circle = new fabric.Circle({ 
        radius: 20, 
        fill: 'red', 
        left: 100, 
        top: 100 
       }); 
      canvas.add(circle); 

var square = new fabric.Rect({ 
       left: 130, 
       top: 140, 
       fill: 'green', 
       width: 40, 
       height: 80 
      }); 
      canvas.add(square); 

canvas.renderAll(); 

$('#duplicate-item').on('click', function(event) { 
    event.preventDefault(); 

    if(canvas.getActiveObject()) { 
     var actObj = canvas.getActiveObject(); 
     console.log('active object'+actObj);  
     var clone = fabric.util.object.clone(canvas.getActiveObject()); 
     clone.set({left: actObj.left+10,top: actObj.top+10}); 
     clone.setCoords(); 
     canvas.add(clone); 
     canvas.renderAll(); 
    } 
});