添加fabric.js要分组的行

Question

如何在fabric.js中为组添加行？似乎每个行的top和left属性都设置为0，因为最终的网格大小也是0。

添加到群组的代码：

let group = new fabric.Group();

for (let i = 0; i < canvas.getWidth() / gridSize; i++) {

   let horizontalLine = new fabric.Line(
      [i * gridSize, 0, i * gridSize, canvas.getWidth()]
   );

   let verticalLine = new fabric.Line(
      [0, i * gridSize, canvas.getWidth(), i * gridSize]
   );

   group.add(horizontalLine, verticalLine);
}

canvas.add(group);

Self-explaining fiddler

Answer 1

这可以通过以下方式完成......

＆＃13;

＆＃13;

var canvas = new fabric.Canvas('c');
let gridSize = 15;

$("#addAsGroup").click(() => {
    canvas.clear();
    let separateLines = [];
    for (let i = 0; i < canvas.getWidth() / gridSize; i++) {
        let horizontalLine = new fabric.Line(
            [i * gridSize, 0, i * gridSize, canvas.getWidth()], {
                stroke: '#000'
            });
        let verticalLine = new fabric.Line(
            [0, i * gridSize, canvas.getWidth(), i * gridSize], {
                stroke: '#000'
            });
        separateLines.push(horizontalLine);
        separateLines.push(verticalLine);
    }
    
    // add lines to group
    let group = new fabric.Group(separateLines);
    canvas.add(group);
});

$("#addAsSeparateObjects").click(() => {
    canvas.clear();
    let separateLines = [];
    for (let i = 0; i < canvas.getWidth() / gridSize; i++) {
        let horizontalLine = new fabric.Line(
            [i * gridSize, 0, i * gridSize, canvas.getWidth()], {
                stroke: '#000'
            });
        let verticalLine = new fabric.Line(
            [0, i * gridSize, canvas.getWidth(), i * gridSize], {
                stroke: '#000'
            });
        separateLines.push(horizontalLine);
        separateLines.push(verticalLine);
    }
    separateLines.forEach((line) => {
        canvas.add(line);
    })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>
<button id="addAsGroup">AddAsGroup</button>
<button id="addAsSeparateObjects">AddAsSeparateObjects</button>

＆＃13;

＆＃13;

＆＃13;