fabric js克隆路径组类型对象

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

请看一下我在 jsfiddle 中的示例，这就是您所需要的。 jsfiddle : http://jsfiddle.net/tornado1979/0fbefh52/1/

这是代码，您 select 一个对象，然后按下按钮进行克隆：

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

Answer 2

我添加了一个加载 svg 图像的小代码，并将其添加到 canvas。用同样的方法（select 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/

fabric js克隆路径组类型对象

fabric js clone path-group type object

jquery

canvas

fabricjs