面料js克隆路径组类型对象

我想在fabricJs克隆一个SVG对象。它第一次没问题，但它克隆了2次和4次，依此类推。我没有找到解决我的问题的方法。面料js克隆路径组类型对象

这里是我的尝试：

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

来源

2015-04-07 Nistor Cristian

检查出你的'selectedObject'并确保它不包括任何克隆的对象。这听起来像是重复了以前的重复以及预期的对象。 –

是的......锡你能说得对吗......我在canvas.on里面调用了clone函数（'object：selected'，function（options）{...所以它复制了我所有的svgs –

我添加了一个加载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/

来源

2015-04-09 12:43:12

请看看我的的jsfiddle exampe，这是你所需要的。的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(); 
    } 
});

来源

2015-04-08 07:12:01

但是你的圆形和方形在jsfiddle中创建的不是路径组类型的元素......你可以使用SVG来查看它是否工作？ –

面料js克隆路径组类型对象

回答

相关问题