Hinzufügen von fabric.js Linien zur Gruppe

Question

Wie füge ich Linien zur Gruppe in fabric.js hinzu? Es sieht so aus, als ob die obere und linke Eigenschaft jeder Zeile auf 0 gesetzt ist, und aufgrund dieser Endgröße des Rasters auch 0 ist.

Code of Hinzufügen zur Gruppe:

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

die in der folgenden Art und Weise erreicht werden könnte ...

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>