Javascript 如何在fabric js中动态添加组中的对象

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

.帆布{
边框：1px纯黑；
宽度：1100px；
高度：1100px；
}
var canvas=newfabric.canvas（'canvas'）；
画布设置宽度（1100）；
画布设置高度（1100）；
//透明帆布
canvas.clear（）；
//添加红色矩形
canvas.add（new fabric.Rect({
宽度：50，高度：50，左侧：50，顶部：50，填充：“rgb（255,0,0）”
}));
canvas.add（new fabric.Rect({
宽度：50，高度：50，左侧：110，顶部：50，填充：“rgb（255,0,0）”
}));
canvas.add（new fabric.Rect({
宽度：50，高度：50，左侧：170，顶部：50，填充：“rgb（285,0,0）”
}));
//var clone=obj.clone（）；
//警报（obj）；
项目=画布。\u对象；
var group=新结构组([
//canvas.add（obj）
canvas.items.clone（）
//canvas.item（1.clone（），
//canvas.item（2.clone）（）
]);
canvas.clear（）.renderAll（）；
canvas.add（组）；

不确定，但我想您正在寻找

addWithUpdate

代码：

---

欲了解更多信息，请参见此

尝试解释更多内容。。还有一些代码。是的，这就像一个符咒。group.add（）不起作用

 <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>

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

    }));