Fabric.js: как сгруппировать объекты, используя только addWithUpdate()

Question

Моя задача - создать группу из трех прямоугольников и центрировать группу. Проблема Я не могу сгруппировать эти прямоугольники, поэтому следующая проблема заключается в том, что когда я центрирую группу, все прямоугольники будут перекрываться в одном и том же центральном положении.

пояснение из кода для упрощения понимания, прямоугольник в каждом i имеет другое положение, поэтому мне нужно создать группу для их хранения, а затем центрировать группу, чтобы предотвратить перекрытие прямоугольников в одном и том же центральном положении.

for (var i = 0; i < count; i++) { 
     var Bid = '#' + i; 
     var Bheight = $(Bid).height(); 
     var Bwidth = $(Bid).width(); 
     var Btop = $(Bid).position().top; 
     var Bleft = $(Bid).position().left; 
     alert(Bleft); 

     var clipRect = new fabric.Rect({ 
      originX: 'left', 
      originY: 'top', 
      height: Bheight, 
      width: Bwidth, 
      left: Bleft, 
      top: Btop, 
      fill: '#DDD', 
      opacity: 0.5, 
      strokeWidth: 0, 
      selectable: false 
     }); 

     var group = new fabric.Group(); 
     group.addWithUpdate(clipRect); 
     canvas.add(group); 
     canvas.centerObject(group); 
     canvas.renderAll(); 
    } 

Однако, если у вас есть лучшее решение для моей точки зрения, предложите его. Я буду очень благодарен.

Answer 1

Вы создаете новую группу каждый раз, когда цикл повторяется.

var group = new fabric.Group(); 

for (var i = 0; i < count; i++) { 
    var Bid = '#' + i; 
    var Bheight = $(Bid).height(); 
    var Bwidth = $(Bid).width(); 
    var Btop = $(Bid).position().top; 
    var Bleft = $(Bid).position().left; 
    alert(Bleft); 

    var clipRect = new fabric.Rect({ 
     originX: 'left', 
     originY: 'top', 
     height: Bheight, 
     width: Bwidth, 
     left: Bleft, 
     top: Btop, 
     fill: '#DDD', 
     opacity: 0.5, 
     strokeWidth: 0, 
     selectable: false 
    }); 


    group.addWithUpdate(clipRect); 
} 

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