maike-ruler v1.0.0

页面标尺工具，缩放跟随

使用

支持屏幕像素 devicePixelRatio 支持参考线 支持屏幕缩放

支持动态显隐

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;
    },
  }

4. 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>