rulerjs-libs
A typeScript library for ruler.js
Background
rulerjs-libs
is the typescript library for ruler.js and designed for easily apply in Angular porjects or Vue.js projects.
Installation
npm
npm install rulerjs-libs --save
Add rulerjs-libs.scss
to your main scss file
;
Add a div
as the container to your page
Add RulerjsLib
and Options
to your component
;; ;options.container = document.getElementById'RulerWrapper' as HTMLElement;;
Functions
Change the unit for the rulers. Default is RulerUnitType.PIXELS
// ...;// ... // ...myRuler.setUnitRulerUnitType.INCHES;// ...
Change the theme of the rulers. Default is RulerTheme.LIGHT_THEME
// ...;// ... // ...myRuler.setThemeRulerTheme.DARK_THEME;// ...
Change the scale of the rulers to match measure target scale in current unit
// ...myRuler.setScale2;// ...
API
Options
The options for generating rulers
container // The container for rulersmeasuringTarget default: null // Optional. If your measure target has different size from the containerrulerHeight default: 15 // The height of the rulerfontFamily default: 'arial' // The font family for the display textsfontSize default: 8 // The font size of the display textsfontColor default: '#333' // The font color of the display textsstrokeStyle default: 'gray' // The stroke style for the rulersrulerAlignments default: // The positions of rulersconerAlignments default: // The positions of cornerslineWidth default: 1 // The line width for the contextenableMouseTracking default: true // Is showing the mouse trackersenableTooltip default: true // Is showing the tooltip
Todo List
- Set custom start point of the ruler other than (0, 0)
- Show negative values when start point is not at (0, 0)