pixi-graphpaper v2.0.1

Pixi Graph Paper

Ruled graph paper, PIXI.Sprite instance able to be added to the display list via addChild().

• CodeSandbox Demo: https://codesandbox.io/s/pixi-graph-paper-xn2rm
• Storybook Demo: https://jasonsturges.github.io/pixi-graphpaper

Getting Started

To install, execute:

npm i pixi-graphpaper

Then, import into a project as:

import { GraphPaper } from "pixi-graphpaper";

Usage

By default, a dark theme graph paper will be applied in a 1000 x 1000 pixel grid, with:

• Major grid every 100-pixels
• Intermediate grid every 50-pixels
• Minor grid every 10-pixels

Instantiate and add to the display list:

import { GraphPaper } from "pixi-graphpaper";

let paper = new GraphPaper();
stage.addChild(paper);

Options may be passed to the constructor:

let paper = new GraphPaper({
  graphWidth: 2000,
  graphHeight: 2000,
});

Or, set via properties:

let paper = new GraphPaper();

paper.graphWidth = 2000;
paper.graphHeight = 2000;

Properties

The following properties may be set on a GraphPaper instance:

Graph Paper Styles

Optionally, there are built-in styles via the GraphStyle class.

Apply via the constructor:

import { GraphPaper, GraphStyle } from "pixi-graphpaper";

let paper = new GraphPaper({
  ...GraphStyle.BLUEPRINT,
  graphWidth: 2000,
  graphHeight: 2000,
});