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
``` bower install ruler.js --save-dev ```
#####Or directly
```html <script src="css/ruler.css"></script> <script src="js/ruler.js"></script> ```
##Getting Started
```javascript ruler.constructRulers({ 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 ruler.setPos({x:100, y:100}) /* change the left, top, positions of the rulers */ ruler.scale(1.5); /* change the scale of the points */ ruler.toggleRulerVisibility(true); /* hide/show rulers */ ruler.toggleGuideVisibility(true); /* hide/show guides */ ruler.clearGuides(true); /* clear all guides */ ```
You can also clear a guide line by double clicking on it or dragging it back to the ruler
JS Bin<script src="http://static.jsbin.com/js/embed.js"></script>
1.0.0
All latest browsers
Want to contribute? Great!
ruler.js uses grunt.
$ git clone https://github.com/MrFrankel/ruler.git
$ npm install
$ bower install
$ grunt buildWrite Tests Demo page
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent