区域标尺

示例Demo

为areaRuler指定一个容器，它可以为你创造一个类似于PS的区域标尺！

###安装

npm install arearuler --save
Then

import Ruler from 'arearuler' import 'arearuler/dist/ruler.min.css'

##Getting Started

var myRuler = new ruler({ container: document.querySelector('#stage'),// 标尺容器 rulerHeight: 20, // 标尺厚度 fontFamily: 'arial', // 节点字体 fontSize: '12px', strokeStyle: 'white', lineWidth: 1, enableMouseTracking: true, enableToolTip: true }); Usage

myRuler.api.setPos({x:100, y:100}) /* 改变标尺的坐标点 */ myRuler.api.setScale(1.5); /* 改变标尺缩放比例 */ myRuler.api.toggleRulerVisibility(true); /* 隐藏或者显示标尺 */ myRuler.api.toggleGuideVisibility(true); /* 隐藏或者显示标线 */ 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

Write Tests

MIT