Fabric.js：如何仅使用addWithUpdate（）对对象进行分组

Question

My point is to create a group of 3 Rectangles, and center the group. The problem is I cannot group those rectangles so the following problem is, when I center the group, all rectangles will overlap on the same center position.

explaining from the code for easier understanding, the rectangle in each i has different position so I have to create a group to store them then center the group in order to prevent rectangles overlapping on the same center position.

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

However, if you have got better solution for my point, please suggest it. I will appreciate it a lot.

Answer 1

You're creating a new group each time your loop iterates.

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();