javascript - Fabricjs 组在另一个组内

Question

我对 FabricJS 中的组有疑问。当我添加例如。 2 个组在另一个组中，我无法正确设置内部组的 left 和 top 属性。看看我的代码。

字母 A 应在左上角(上:0，左:0)，字母 B 应在 A 下方(上:50，左:50)。

但是在这个例子中，字母在中间，当我改变 B 的位置时，A 的位置也会改变。

它是 FabricJS 中的错误吗？

var canvas = new fabric.Canvas('editorCnvs');

function getCell(contentTxt, fontSize, leftOffset, topOffset) {
        var cellCnt = new fabric.Text(contentTxt, {
            fontSize: fontSize
        });

        var cellGrp = new fabric.Group([cellCnt], {
            height: 50,
            width: 50,
            top: topOffset,
            left: leftOffset
        });

        return cellGrp;
    }
    
    var cellsArray = [];

    //It should be on top left corner
    cellsArray.push(
            getCell('A', 30,
                    0, 0));

        
    cellsArray.push(
            getCell('B', 30,
                    50, 50));

    var rowGrp = new fabric.Group(cellsArray, {
        height: 200,
        width: 200
    });

canvas.add(rowGrp);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="editorCnvs" width="400" height="566">
</canvas>

Answer 1

Group 在计算出可以捕获所有元素的边界框后自动设置其尺寸。

组中的对象相对于中心定位。

如果您设置宽度和高度，您将获得额外的宽度或高度散布在对象周围的效果。

如果您创建没有宽度和高度的组，您会看到该位置得到尊重。

var canvas = new fabric.Canvas('editorCnvs');

function getCell(contentTxt, fontSize, leftOffset, topOffset) {
        var cellCnt = new fabric.Text(contentTxt, {
            fontSize: fontSize
        });

        var cellGrp = new fabric.Group([cellCnt], {

            top: topOffset,
            left: leftOffset
        });

        return cellGrp;
    }
    
    var cellsArray = [];

    //It should be on top left corner
    cellsArray.push(
            getCell('A', 30,
                    0, 0));

        
    cellsArray.push(
            getCell('B', 30,
                    50, 50));

    var rowGrp = new fabric.Group(cellsArray, {

    });

canvas.add(rowGrp);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="editorCnvs" width="400" height="566">
</canvas>