Adding grid over Fabric.js canvas

I just started using Fabric.js (I have to say, I'm impressed).

I want to add a grid over the fabric objects. In the following code, I am putting my grid canvas right over on the Fabric canvas. The problem here is that, I now cannot move my fabric objects!

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
  <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js'></script>

</head>
<body>

<div style="height:480px;width:640px;border:1px solid #ccc;position:relative;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">

 <canvas id="rubber" width="800" height="800" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="myCanvas" width="800" height="800" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

<script>
//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {

    function renderGrid(x_size,y_size, color)
    {
        var canvas = $("#myCanvas").get(0);
        var context = canvas.getContext("2d");

        context.save();
        context.lineWidth = 0.5;
        context.strokeStyle = color;

        // horizontal grid lines
        for(var i = 0; i <= canvas.height; i = i + x_size)
        {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(canvas.width, i);
            context.closePath();
            context.stroke();
        }

        // vertical grid lines
        for(var j = 0; j <= canvas.width; j = j + y_size)
        {
            context.beginPath();
            context.moveTo(j, 0);
            context.lineTo(j, canvas.height);
            context.closePath();
            context.stroke();
        }

        context.restore();
    }

    renderGrid(10,15, "gray");
});

});//]]>  

  var canvas = new fabric.Canvas('rubber');
  canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));

  canvas.selectionColor = 'rgba(0,255,0,0.3)';
  canvas.selectionBorderColor = 'red';
  canvas.selectionLineWidth = 5;
</script>


</body>
</html>

I am hoping that there is a way to do this in Fabric itself.

Any help would be awesome, thanks!

I hope this will help you----

function draw_grid(grid_size) {

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

John

This two lines of code will work:

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

A shorter version and more generic for copy/paste :

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

My solution is -

var width = canvas.width;
var height = canvas.height;

var j = 0;
var line = null;
var rect = [];
var size = 20;

console.log(width + ":" + height);

for (var i = 0; i < Math.ceil(width / 20); ++i) {
    rect[0] = i * size;
    rect[1] = 0;

    rect[2] = i * size;
    rect[3] = height;

    line = null;
    line = new fabric.Line(rect, {
        stroke: '#999',
        opacity: 0.5,
    });

    line.selectable = false;
    canvas.add(line);
    line.sendToBack();

}

for (i = 0; i < Math.ceil(height / 20); ++i) {
    rect[0] = 0;
    rect[1] = i * size;

    rect[2] = width;
    rect[3] = i * size;

    line = null;
    line = new fabric.Line(rect, {
        stroke: '#999',
        opacity: 0.5,
    });
    line.selectable = false;
    canvas.add(line);
    line.sendToBack();

}

canvas.renderAll();

You have to save all line objects for removing grid, or you can added all line objects to a group, and you can remove the group for removing grid, well I think this is not elegant one, but worked.

If you don't insist on generating your grid dynamically you might want to consider the native overlay image function that fabric.js provides.

var canvas = new fabric.Canvas('rubber');
canvas.setOverlayImage('grid.png', canvas.renderAll.bind(canvas));

It won't hinder interactions with the objects on the canvas at all.

来源：https://stackoverflow.com/questions/17255867/adding-grid-over-fabric-js-canvas

标签

javascript

jquery

html5

fabricjs