javascript - Fabric.js : how to group objects using only addWithUpdate()

Question

我的观点是创建一组 3 个矩形，并将该组居中。问题是我无法对这些矩形进行分组，因此以下问题是，当我将组居中时，所有矩形将重叠在同一中心位置。

为了更容易理解，从代码中解释，每个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();