CODEWITHSUNDEEP
javascriptfabricjs
Savisaar
Savisaar

Reputation: 31

Is there a more efficient way of creating a Grid in Canvas?

I am creating a grid over an image using canvas and such i created what i have in my below jsfiddle.

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

as you can see from the example i am using huge amounts of:

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

to achieve a grid like system. I feel like there should be an easier way with less code?

Upvotes: 0

Views: 245

Answers (2)

Fraser
Fraser

Reputation: 17084

There a few ways you could handle this - perhaps this is an acceptable solution. Really it depends on how flexible you want the grid to be...

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 grid coordinate
function drawSquare(x, y) {
  canvas.add(new fabric.Rect({
    left: x * size + offset.left,
    top: y * size + offset.top,
    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 [y, row] of grid.entries()) {
  for (const [x, cell] of row.entries()) {
    // draw a square if the cell value is 1 (true)
    cell && drawSquare(x, y);
  }
}
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>

If you wanted to be super concise and have a "less editable" grid then you can store the rows as numbers - and then just use their bits as flags...although it is probably also less readable. e.g.

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 * config.size + config.offset.left,
    top: y * config.size + config.offset.top,
    width: config.size,
    height: config.size,
    fill: 'rgba(0,0,0,0)',
    originX: 'left',
    originY: 'top',
    centeredRotation: true,
    stroke: 'black',
    strokeWidth: 1
  }));
}

function h2b(h) {
  return h.toString(2).padStart(19, '0').split('').entries();
}

for (const [y, row] of config.grid.entries()) {
  for (const [x, cell] of h2b(row)) {
    +cell && drawSquare(x, y);
  }
}
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>

..and if you wanted to be super-duper concise and you don't care at all about readability or maintainability!

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

[0x7C01F, 0x7E1FF, 0x7FFFF, 0x7FFFF, 0x7FFFF, 0x7FFFF, 0x3FFF].forEach(
  (r, i) => r.toString(2).padStart(19, 0).split('').forEach(
    (c, j) => +c && g.add(new fabric.Rect({
      left: j * 25 + 50,
      top: i * 25 + 49,
      width: 25,
      height: 25,
      fill: 'rgba(0,0,0,0)',
      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>

Upvotes: 3

dpDesignz
dpDesignz

Reputation: 1959

You could create an array with the positions and just loop over it

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

Full example on jsfiddle http://jsfiddle.net/dpdesignz/op2z7yrk/12/

Upvotes: 0

Related Questions