maike-ruler编辑器开发标尺工具

工具效果如图

maike-ruler效果图

页面标尺工具，缩放跟随

支持屏幕像素 devicePixelRatio
支持参考线
支持屏幕缩放
支持动态显隐
按住ctrl+鼠标滚轮可以缩放

---

1. 安装

  npm i maike-ruler -S

2. 组件 js 使用

  import maikeRuler from 'maike-ruler'

  components: {
    maikeRuler,
    ...
  },
  data(){
    return{
      lines:[
        h:[],
        v:[]
      ],
      palette:{
        bgColor: '#FFF', // 标尺底色
        longfgColor: string, // 长线段颜色
        shortfgColor: string, // 短线段颜色
        fontColor: string, // 字体颜色
        shadowColor: string, // 阴影颜色
        lineColor: string, // 参考线颜色
        borderColor: string, // 边框颜色
      }
    }
  },
  methods:{
    handleLine(lines) {
      this.lines = lines;
    },
  }

3. HTML 引用

  :thick="thick"
  
  :scale="scale"
  
  :width="width"
  
  :height="height"
  
  :startX="startX"
  
  :startY="startY"
  
  :horLineArr="lines.h"
  
  :verLineArr="lines.v"
  
  :palette="palette"
  
  :isShowRuler="rulerShow"
  
  @handleLine="handleLine"