This repository was archived by the owner on Oct 24, 2018. It is now read-only.
- Notifications
You must be signed in to change notification settings - Fork5
Get your paper.js canvas under control.
License
NotificationsYou must be signed in to change notification settings
welai/GridPaper
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
GridPaper allows you to add controlling to a paper.js canvas. Major features include:
- Use cartesian coordinates. The positive direction of the y axis is to the top
- Show customizable grids on the paper.js canvas
- User-friendly interactions
GridPaper is written as a UMD library, and can be imported by either directly import with HTML<script/> tag, or makes it work as a module.
GridPaper needspaper.js as its dependency, so you should import or install paper.js first.
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script><scriptsrc="dist/gridpaper.js"></script>
And the JavaScript part:
window.addEventListener('load',()=>{window.gridPaper=newGridPaper({elementID:'preview'});});
importGridPaperfrom'gridpaper';
The prototype of the GridPaper constructor allows only one parameter which serves as the configuration object. The object must have the propertyelementID indicating the div id where GridPaper would initialize.
window.addEventListener('load',()=>{window.gridPaper=newGridPaper({elementID:'preview'});});
// ConfigurationsexportinterfaceConfig{/** Div ID */elementID:string,/** * A list of ordered pairs, indicating the grid units of the grid paper. * The ordered pairs start with the major grid unit, and end with the minor. * The list should be ranked in increasing order of the major grid units. */gridSeries?:number[][],/** Coordinate limits */bound?:Rect,/** Maximum major grid density */majorGridDensity?:number,/** Aspect locked */aspeckLocked?:true,/** Show grid */showGrid?:true};
// The canvas to draw ongridpaper.canvas// Paper project instancegridpaper.paperProject// Paper tool instancegridpaper.paperTool
- Install directions
- Test multiple gridpapers
MIT