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组在另一组内

2 个答案: