在 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 }))
}

在 FabricJS 中添加行和列

Adding rows and columns in FabricJS

javascript

fabricjs