CODEWITHSUNDEEP
fabricjs
bartosz.baczek
bartosz.baczek

Reputation: 1516

Adding fabric.js Lines to group

How do I add lines to group in fabric.js? It seems as if each line top and left property is set to 0, and because of that final size of grid is 0 as well.

Code of adding to group:

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

Upvotes: 0

Views: 1147

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32889

That could be accomplished in the following way ...

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>

Upvotes: 1

Related Questions