Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jasonsturges/pixi-graphpaper
Pixi.js ruled graph paper
https://github.com/jasonsturges/pixi-graphpaper
2d drawing graph grid npm paper pixi
Last synced: about 19 hours ago
JSON representation
Pixi.js ruled graph paper
- Host: GitHub
- URL: https://github.com/jasonsturges/pixi-graphpaper
- Owner: jasonsturges
- License: isc
- Created: 2021-03-01T22:42:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-03-17T06:03:34.000Z (over 2 years ago)
- Last Synced: 2024-11-14T18:55:10.187Z (3 days ago)
- Topics: 2d, drawing, graph, grid, npm, paper, pixi
- Language: TypeScript
- Homepage: https://jasonsturges.github.io/pixi-graphpaper
- Size: 2.7 MB
- Stars: 16
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```js
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:
```js
import { GraphPaper } from "pixi-graphpaper";
let paper = new GraphPaper();
stage.addChild(paper);
```
Options may be passed to the constructor:
```js
let paper = new GraphPaper({
graphWidth: 2000,
graphHeight: 2000,
});
```
Or, set via properties:
```js
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:
```js
import { GraphPaper, GraphStyle } from "pixi-graphpaper";
let paper = new GraphPaper({
...GraphStyle.BLUEPRINT,
graphWidth: 2000,
graphHeight: 2000,
});
```