https://github.com/mrfrankel/ruler
HTML5 Canvas ruler for authoring tools
https://github.com/mrfrankel/ruler
ruler
Last synced: over 1 year ago
JSON representation
HTML5 Canvas ruler for authoring tools
- Host: GitHub
- URL: https://github.com/mrfrankel/ruler
- Owner: MrFrankel
- Created: 2015-05-21T07:41:41.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2021-10-20T11:26:37.000Z (almost 5 years ago)
- Last Synced: 2025-03-29T18:06:39.467Z (over 1 year ago)
- Topics: ruler
- Language: JavaScript
- Homepage: http://mrfrankel.github.io/ruler/
- Size: 56.6 KB
- Stars: 225
- Watchers: 11
- Forks: 59
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
ruler.js
======
### Demo
Demo Page
ruler.js is an HTML5 ruler plugin that provides a set of 'photoshop' like rulers to surround the 'stage' of your authoring tools.
No jquery!
No dependencies!
###Installation
```terminal
npm install ruler.js --save
```
Then
```html
```
##Getting Started
```javascript
var myRuler = new ruler({
container: document.querySelector('#stage'),// reference to DOM element to apply rulers on
rulerHeight: 15, // thickness of ruler
fontFamily: 'arial',// font for points
fontSize: '7px',
strokeStyle: 'black',
lineWidth: 1,
enableMouseTracking: true,
enableToolTip: true
});
```
### Usage
```javascript
myRuler.api.setPos({x:100, y:100})
/*
change the left, top, positions of the rulers
*/
myRuler.api.setScale(1.5);
/*
change the scale of the points
*/
myRuler.api.toggleRulerVisibility(true);
/*
hide/show rulers
*/
myRuler.api.toggleGuideVisibility(true);
/*
hide/show guides
*/
myRuler.api.clearGuides(true);
/*
get list of guides to store or copy
*/
myRuler.api.getGuides(); // => [{dimension: number, poxX: number: posY: number}...]
/*
set guides from a pre stored list
*/
myRuler.api.setGuides([{dimension: number, poxX: number: posY: number}...]);
/*
clear all guides
*/
myRuler.api.destory();
/*
remove rulers, guides and references;
*/
```
You can also clear a guide line by double clicking on it or dragging it back to the ruler
### Version
1.0.0
### Support
All latest browsers
### Development
Want to contribute? Great!
ruler.js uses grunt.
```sh
$ git clone https://github.com/MrFrankel/ruler.git
$ npm install
$ npm run serve
```
### Todo's
Write Tests
License
----
MIT