Interface OBJ_Grid

Grid shape options object that extends OBJ_Generic (without drawType) and OBJ_FigurePrimitive

A grid is a rectangle divided into a series of vertical and horizontal lines.

The rectangle is defined by bounds.

xNum and yNum can be used to defined a number of equally spaced lines in the rectangle (including the edges).

Alternatively xStep and yStep can be used to define the spacing between lines from the bottom left corner.

The line width and style is defined with line.

bounds TypeParsableRect — rectangle definition
xStep number — distance between vertical lines in grid from left - use this instead of xNum. This will override step.
yStep number — distance between horizontal lines in grid from bottom - use this instead of yNum. This will override step.
xNum number — number of vertical lines in grid including top and bottom lines - overrides num and xStep.
yNum number — number of horizontal lines in grid including left and right lines - overrides num and yStep.
line OBJ_LineStyleSimple — line style options - do not use any corner options
drawBorderBuffer (number | TypeParsableBorder) & TypeParsableBorder — override OBJ_Generic drawBorderBuffer with number to make the drawBorderBuffer the same as the grid outline with additional number buffer each side (0)

See

To test examples, append them to the boilerplate

Example

// Grid defined by xStep and yStep
figure.add({
  name: 'g',
  make: 'grid',
  bounds: [-0.5, -0.5, 1, 1],
  xStep: 0.25,
  yStep: 0.25,
  line: {
    width: 0.03,
  },
});

Example

// Grid defined by xNum and yNum with dashed lines
const grid = figure.primitives.grid({
  bounds: [-0.5, -0.5, 1, 1],
  xNum: 4,
  yNum: 4,
  line: {
    width: 0.03,
    dash: [0.1, 0.02],
  },
});
figure.elements.add('g', grid);

Example

// Grid of grids
figure.add({
  name: 'g',
  make: 'grid',
  bounds: [-0.7, -0.7, 0.6, 0.6],
  xNum: 4,
  yNum: 4,
  line: {
    width: 0.03,
  },
  copy: [
    { along: 'x', num: 1, step: 0.8},
    { along: 'y', num: 1, step: 0.8},
  ],
});
@interface

Interface OBJ_Grid

See

Example

Example

Example

Settings