工具效果如图

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 引用

<maikeRuler 
  :lang="zh-CN"
   <!--语言-->
  :thick="thick"
  <!--标尺高度-->
  :scale="scale"
  <!--缩放比例-->
  :width="width"
  <!--使用标尺的盒子宽度-->
  :height="height"
  <!--使用标尺的盒子高度-->
  :startX="startX"
  <!--横向标尺开始的刻度-->
  :startY="startY"
  <!--纵向标尺开始的刻度-->
  :horLineArr="lines.h"
  <!--横向参考线-->
  :verLineArr="lines.v"
  <!--纵向参考线-->
  :palette="palette"
  <!--颜色样式-->
  :isShowRuler="rulerShow"
  <!--是否显示标尺-->
  @handleLine="handleLine"
  <!--参考线操作回调函数->
  ></maikeRuler>