Agregar cuadrícula sobre lienzo Fabric.js

Ya no busques más por todo internet porque llegaste al lugar adecuado, tenemos la respuesta que necesitas sin problemas.

Solución:

Estas dos líneas de código funcionarán:

var gridsize = 5;
for(var x=1;x<(canvas.width/gridsize);x++)
                        
                            canvas.add(new fabric.Line([100*x, 0, 100*x, 600], stroke: "#000000", strokeWidth: 1, selectable:false, strokeDashArray: [5, 5]));
                            canvas.add(new fabric.Line([0, 100*x, 600, 100*x], stroke: "#000000", strokeWidth: 1, selectable:false, strokeDashArray: [5, 5]));
                    

Una versión más corta y más genérica para copiar/pegar:

var oCanvas; // must be your canvas object
var gridWidth; // <= you must define this with final grid width
var gridHeight; // <= you must define this with final grid height

// to manipulate grid after creation
var oGridGroup = new fabric.Group([], left: 0, top: 0);

var gridSize = 20; // define grid size

// define presentation option of grid
var lineOption = stroke: 'rgba(0,0,0,.4)', strokeWidth: 1, selectable:false, strokeDashArray: [3, 3];

// do in two steps to limit the calculations
// first loop for vertical line
for(var i = Math.ceil(gridWidth/gridSize); i--;)
    oGridGroup.add( new fabric.Line([gridSize*i, 0, gridSize*i, gridHeight], lineOption) );

// second loop for horizontal line
for(var i = Math.ceil(gridHeight/gridSize); i--;)
    oGridGroup.add( new fabric.Line([0, gridSize*i, gridWidth, gridSize*i], lineOption) );

// Group add to canvas
oCanvas.add(oGridGroup);

Espero que esto ayude----

function draw_grid(grid_size)  (grid_size = 25);
  currentCanvasWidth = canvas.getWidth();
  currentcanvasHeight = canvas.getHeight();


  // Drawing vertical lines
  var x;
  for (x = 0; x <= currentCanvasWidth; x += grid_size) 
      this.grid_context.moveTo(x + 0.5, 0);
      this.grid_context.lineTo(x + 0.5, currentCanvasHeight);
  

  // Drawing horizontal lines
  var y;
  for (y = 0; y <= currentCanvasHeight; y += grid_size) 
      this.grid_context.moveTo(0, y + 0.5);
      this.grid_context.lineTo(currentCanvasWidth, y + 0.5);
  

  grid_size = grid_size;
  this.grid_context.strokeStyle = "black";
  this.grid_context.stroke();

Recuerda que tienes la opción de parafrasear si acertaste tu contratiempo justo a tiempo.

---

---

Utiliza Nuestro Buscador