javascript - 在 FabricJS 中添加行和列

Question

如何在 FabricJs Canvas 中添加行和列。

这是普通 Canvas 上的代码:

var ctx = canvas.getContext('2d'),
    columns = 6,
    rows = 4,
    w, h, tileWidth, tileHeight;

演示:JSFIDDLE

Answer 1

看看这个 fiddle ，它包含用于实现网格的 FabricJS 代码。请记住，FabricJS 是 HTML 5 Canvas API 的包装器。

jsfiddle

var canvas = new fabric.Canvas('c', { selection: false });
var grid = 50;

// create grid
for (var i = 0; i < (600 / grid); i++) {
  canvas.add(new fabric.Line([ i * grid, 0, i * grid, 600], { stroke: '#ccc', selectable: false }));
  canvas.add(new fabric.Line([ 0, i * grid, 600, i * grid], { stroke: '#ccc', selectable: false }))
}