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:

Type	Param	Description
number	backgroundFillAlpha	Opacity of the background fill
number	backgroundFillColor	Color of the background
boolean	backgroundVisible	Whether background is visible
number	graphHeight	Width of the graph
number	graphWidth	Height of the graph
number	intermediateGridSize	Grid size of intermediate lines between major and minor rules
boolean	intermediateGridVisible	Whether intermediate grid rule is visible
number	intermediateStrokeAlpha	Opacity of the intermediate rule stroke
number	intermediateStrokeColor	Color of the intermediate rule stroke
number	intermediateStrokeWidth	Width of the intermediate rule stroke
number	majorGridSize	Grid size of the major rule
boolean	majorGridVisible	Whether major grid rule is visible
number	majorStrokeAlpha	Opacity of the major rule stroke
number	majorStrokeColor	Color of the major rule stroke
number	majorStrokeWidth	Width of the major rule stroke
number	minorGridSize	Grid size of the minor rule
boolean	minorGridVisible	Whether minor grid rule is visible
number	minorStrokeAlpha	Opacity of the minor rule stroke
number	minorStrokeColor	Color of the minor rule stroke
number	minorStrokeWidth	Width of the minor rule stroke

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