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

Question

1.我想在组中动态添加对象，或者动态克隆对象。 2.我试过但没有循环工作。 3.想要使一组对象呈现在 Canvas 上(由用户在 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>

Answer 1

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

代码:

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

    }));

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