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

请看看我在jsfiddle的例子，这就是你需要的。 jsfiddle：http://jsfiddle.net/tornado1979/0fbefh52/1/

这是代码，你选择一个对象，然后按下按钮克隆：

HTML：

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

JS：

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

fabric js clone path-group type object

2 个答案: