还有在Canvas中创建网格的更有效方法吗？

Question

我正在使用画布在图像上方创建网格，因此我在下面的jsfiddle中创建了自己的内容。

http://jsfiddle.net/3bufekmh/1/

正如您从示例中看到的，我正在使用大量的：

canvas.add(new fabric.Rect({});

以实现类似网格的系统。我觉得应该以更少的代码找到更简单的方法？

Answer 1

您可以通过几种方法来处理-也许这是一个可以接受的解决方案。确实，这取决于您希望网格具有多大的灵活性...

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

// size of squares
const size = 25;

// starting offsets
const offset = {
  left: 49,
  top: 50,
};

// where "1" represents a square and "0" a gap
const grid = [
  [1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];

// draws a square at the given coordinate 
function drawSquare(x, y) {
  canvas.add(new fabric.Rect({
    left: x,
    top: y,
    width: size,
    height: size,
    fill: 'rgba(0,0,0,0)',
    originX: 'left',
    originY: 'top',
    centeredRotation: true,
    stroke: 'black',
    strokeWidth: 1
  }));
}

// loop over our grid rows and cells...
for (const [i, row] of grid.entries()) {
  for (const [j, cell] of row.entries()) {
    // draw a square if the cell value is 1 (true)
    cell && drawSquare(j * size + offset.left, i * size + offset.top);
  }
}

canvas {
    border: 1px solid #ccc;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="550" height="250"></canvas>

如果您想简明扼要，并具有一个“可编辑性较低的”网格，则可以将行存储为数字-然后将其位用作标志...尽管它可能也不太可读。例如

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

const config = {
  grid: [0x7C01F, 0x7E1FF, 0x7FFFF, 0x7FFFF, 0x7FFFF, 0x7FFFF, 0x3FFF],
  size: 25,
  offset: {
    top: 49,
    left: 50
  }
};

function drawSquare(x, y) {
  canvas.add(new fabric.Rect({
    left: x,
    top: y,
    width: config.size,
    height: config.size,
    fill: 'rgba(0,0,0,0)',
    originX: 'left',
    originY: 'top',
    centeredRotation: true,
    stroke: 'black',
    strokeWidth: 1
  }));
}


for (const [i, row] of config.grid.entries()) {
  for (const [j, cell] of row.toString(2).padStart(19, '0').split('').entries()) {
    +cell && drawSquare(
      j * config.size + config.offset.left,
      i * config.size + config.offset.top);
  }
}

canvas {
    border: 1px solid #ccc;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="550" height="250"></canvas>

..如果您想变得简洁，并且根本不关心可读性或可维护性！

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

const s = 25;

[0x7C01F, 0x7E1FF, 0x7FFFF, 0x7FFFF, 0x7FFFF, 0x7FFFF, 0x3FFF].forEach(
  (r, i) => r.toString(2).padStart(19, 0).split('').forEach(
    (c, j) => +c && canvas.add(new fabric.Rect({
      left: j * s + 50,
      top: i * s + 49,
      width: s,
      height: s,
      fill: 'rgba(0,0,0,0)',
      centeredRotation: true,
      stroke: 'black'
    }))));

canvas {
    border: 1px solid #ccc;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="550" height="250"></canvas>

Answer 2

您可以使用位置创建一个数组，然后在其上循环

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

// Set grid options
const gridData = [
    [49, 50],
    [74, 50],
    [99, 50],
    [124, 50],
    [149, 50],
    [399, 50],
    [424, 50],
    [449, 50],
    [474, 50],
    [499, 50]
];

// create grid
gridData.forEach(gridItem => {
    canvas.add(new fabric.Rect({
    left: gridItem[0],
    top: gridItem[1],
    width: 25,
    height: 25,
    fill: 'rgba(0,0,0,0)',
    originX: 'left',
    originY: 'top',
    centeredRotation: true,
    stroke: 'black',
    strokeWidth: 1
  }));
});

jsfiddle http://jsfiddle.net/dpdesignz/op2z7yrk/12/的完整示例