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

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

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

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

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

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>

Answer 2

AndreaBogazzi 你的回答对我很有帮助，但它仍然没有解决单元维度的问题。

我在你的帮助下找到了答案，我将透明矩形添加到单元格组，现在我可以定义单元格尺寸了。

var CELL_SIZE = 50;

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

    var cellFrameRect = new fabric.Rect({
        width: CELL_SIZE,
        height: CELL_SIZE,
        fill: 'none',
        opacity: 0,
        originX: 'center',
        originY: 'center'
    });

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

    return cellGrp;
}

Fabricjs 组在另一个组内

Fabricjs group inside another group

javascript

fabricjs