在Fabric.js画布上添加网格

这两行代码将起作用：

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

复制/粘贴的较短版本和更通用的版本：

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

我希望这能帮助你----

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

我的解决方案是-

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

你必须保存所有的线对象来删除网格，或者你可以将所有的线物体添加到一个组中，然后你可以删除组来删除网格。我认为这不是一个优雅的方法，但有效。

如果你不坚持动态生成网格，你可能需要考虑fabric.js提供的原生覆盖图像函数。

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

它根本不会阻碍与画布上对象的交互。

我真的很喜欢@Draeli的回答，但它似乎不适用于最新的结构版本。修正了旧的一个，并添加了一个对我来说必要的轻微调整——居中网格。

无论如何，也许其他人觉得它很有用：

const gridSize = 100;
const width = this.canvas.getWidth();
const height = this.canvas.getHeight();
const left = (width % gridSize) / 2;
const top = (height % gridSize) / 2;
const lines = [];
const lineOption = {stroke: 'rgba(0,0,0,1)', strokeWidth: 1, selectable: false};
for (let i = Math.ceil(width / gridSize); i--;) {
  lines.push(new fabric.Line([gridSize * i, -top, gridSize * i, height], lineOption));
}
for (let i = Math.ceil(height / gridSize); i--;) {
  lines.push(new fabric.Line([-left, gridSize * i, width, gridSize * i], lineOption));
}
const oGridGroup = new fabric.Group(lines, {left: 0, top: 0});
this.canvas.add(oGridGroup);

this.canvas-这应该是fabric实例。

这是我的解决方案，适用于Fabric Js 4。最后有两个事件监听器，它们在对象移动时附加网格，在对象移动结束时移除网格。（@draeli答案的改进https://stackoverflow.com/a/35936606/1727357）

(function () {
    const gcd = (a, b) => {
        if (!b) {
            return a;
        }
        return gcd(b, a % b);
    }
    const gridWidth = canvas.getWidth();
    const gridHeight = canvas.getHeight();
    const oGridGroup = [];
    console.log(gcd(gridWidth, gridHeight));
    const gridRows = gcd(gridWidth, gridHeight);
    const gridCols = gcd(gridWidth, gridHeight);
    const lineOption = { stroke: 'rgba(0,0,0,.1)', strokeWidth: 1, selectable: false, evented: false };
    for (let i = 0; i <= gridWidth; i += gridCols) {
        oGridGroup.push(new fabric.Line([i, 0, i, gridHeight], lineOption));
    }
    for (let i = 0; i <= gridHeight; i += gridRows) {
        oGridGroup.push(new fabric.Line([0, i, gridWidth, i], lineOption));
    }
    const theGorup = new fabric.Group(oGridGroup);
    theGorup.set({
        selectable: false,
        evented: false
    })
    canvas.on('mouse:down', function (event) {
        if (event.target) {
            canvas.add(theGorup);
        }
    });
    canvas.on('mouse:up', function (event) {
        canvas.remove(theGorup);
    });
}())

更新：

答案基于rafi:发布的代码

1. 我已经更新了缺失的grid_context。

2. 请将"<您的画布Id>quot；把你的画布Id串起来。对于例如"；myCanvas"；。

3. 通常，你在画布上做的任何操作都会清除画布上的网格，在fabric.js画布上注册after:render事件来重新绘制它。所以你总是可以看到它。

    var canvas = new fabric.Canvas(<your canvas Id>);
    canvas.on('after:render',function(ctx){
          draw_grid(25);
    });
    function draw_grid(grid_size) {
       grid_size || (grid_size = 25);
       var currentCanvas = document.getElementById(<your canvas Id>); 
       var grid_context = currentCanvas.getContext("2d"); 
       var currentCanvasWidth = canvas.getWidth();
       var currentCanvasHeight = canvas.getHeight();
       // Drawing vertical lines
       var x;
       for (x = 0; x <= currentCanvasWidth; x += grid_size) {
          grid_context.moveTo(x + 0.5, 0);
          grid_context.lineTo(x + 0.5, currentCanvasHeight);
       }
       // Drawing horizontal lines
       var y;
       for (y = 0; y <= currentCanvasHeight; y += grid_size) {
         grid_context.moveTo(0, y + 0.5);
         grid_context.lineTo(currentCanvasWidth, y + 0.5);
       }
      grid_context.strokeStyle = "#0000002b";
      grid_context.stroke();
    }