CODEWITHSUNDEEP
javascriptfabricjs
Jacek Gzel
Jacek Gzel

Reputation: 480

Fabricjs group inside another group

I have problem with groups in FabricJS. When I add eg. 2 groups inside another group, I can't properly set left and top property for internal groups. Look at my code.

Letter A should be on the top left corner (top: 0, left: 0), and letter B should be below A (top: 50, left: 50).

But in this example letters are on the middle, and when I changing postion of B, position A changing too.

Is it bug in 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>

Upvotes: 4

Views: 2631

Answers (2)

Jacek Gzel
Jacek Gzel

Reputation: 480

AndreaBogazzi your answer was very helpfull for me, but it still not resolve problem with cell dimension.

I found answer with your help, I add transparent rect to cell group and now I can define cell dimension.

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

Upvotes: 0

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

Group set its dimension automatically after calculating a bounding box that can catch all elements.

objects in the group are positioned relative to center.

If you set width and height you will obtain the effect that the extra width or height is spread around objects.

If you create the groups without width and height you will see that the position are respected.

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>

Upvotes: 1

Related Questions