另一組內的Fabricjs組

Question

FabricJS中的組有問題。當我添加例如。另一組內的2組，我無法正確設置內部組的左側和頂部屬性。看看我的代碼。

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