将 fabric.js 行添加到组答案

【问题标题】：Adding fabric.js Lines to group将 fabric.js 行添加到组
【发布时间】：2017-05-11 20:56:42
【问题描述】：

如何在 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

【问题讨论】：

标签： fabricjs

【解决方案1】：

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

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

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

【讨论】：

可以，但是性能太低了。我真的需要先单独添加对象，然后再将它们添加到组中吗？
@bartosz.baczek 啊，我的错。我给了你一个非常复杂的解决方案。你早该这么说的。检查更新的答案。希望现在一切正常:)
嗯，那真是太棒了！非常感谢。我想当通过构造函数添加组时，它会进行一些额外的计算，并且组大小会发生变化。与此同时，我尝试使用 addWithUpdate 方法将对象添加到组中，但也没有成功。