如何在fabric js中动态添加组中的对象 [英] How to add objects in group dynamically in fabric js

问题描述

1.我想在组中动态添加对象，或动态克隆对象。
2.我已经尝试但没有在循环中工作。
3.想要在画布上显示一组对象（由用户在画布上拖动）

1.I want to add objects dynamically in group, or cloning object dynamically. 2.I have tried but not working in looping. 3.Want to make group of objects present over canvas (which is dragged by user over canvas)

 <script src="js/fabric.js" type="text/javascript"></script>
    <canvas id="canvas" class="canvas" ></canvas>

    <style>
    .canvas {
    border: 1px solid Black;
    width: 1100px;
    height: 1100px;
    }

    </style>

     <script>
        var canvas = new fabric.Canvas('canvas');
   canvas.setWidth(1100);
  canvas.setHeight(1100);



// clear canvas
  canvas.clear();

  // add red rectangl
  canvas.add(new fabric.Rect({
  width: 50, height: 50, left: 50, top: 50, fill: 'rgb(255,0,0)'
}));

  canvas.add(new fabric.Rect({
  width: 50, height: 50, left: 110, top: 50, fill: 'rgb(255,0,0)'
  }));
  canvas.add(new fabric.Rect({
  width: 50, height: 50, left: 170, top: 50, fill: 'rgb(285,0,0)'
  }));


//var clone = obj.clone();
//alert(obj);

items = canvas._objects;

var group = new fabric.Group([
     // canvas.add(obj)
  canvas.items.clone()
//  canvas.item(1).clone(),
//  canvas.item(2).clone()
]);


canvas.clear().renderAll();
canvas.add(group);




    </script>

推荐答案

不确定，但我认为你在寻找 addWithUpdate

Not sure but I think you are looking for addWithUpdate

代码：

group.addWithUpdate(new fabric.Rect({
      ...

    }));

更多信息请参阅 http://fabricjs.com/fabric-intro-part-3/

这篇关于如何在fabric js中动态添加组中的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！