pixi-graphpaper
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    Pixi Graph Paper

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

    pixi-graph-paper

    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.

    blueprint

    Apply via the constructor:

    import { GraphPaper, GraphStyle } from "pixi-graphpaper";
    
    let paper = new GraphPaper({
      ...GraphStyle.BLUEPRINT,
      graphWidth: 2000,
      graphHeight: 2000,
    });

    Install

    npm i pixi-graphpaper

    DownloadsWeekly Downloads

    21

    Version

    2.0.1

    License

    ISC

    Unpacked Size

    208 kB

    Total Files

    10

    Last publish

    Collaborators

    • jasonsturges