摘要

具备下面内容功能，start过50+才思考添加额外的功能 … （开源不要易啊）

该插件支持通过点击标尺，添加参考线

该插件支持通过鼠标悬浮参考线顶部或左部，显示移除按钮，或直接拖出边界外部

该插件支持显示或隐藏参考线

该插件支持标尺响应视图的缩放

该插件支持显示或隐藏线标尺

吐槽

也作为《英雄联盟》中的奇怪，是一款热门的这么好看且实用的插件，竟然只有20+star，不能忍 …

由于该插件也用在了可视化大屏编辑器上，因此也纳入了可视化编辑器的专栏。

项目地址项目预览

实战项目截图

安装支持全局导入与模块导入

npm install --save vue-sketch-ruler

支持的功能未来支持的功能运用

    import Vue from 'vue';import SketchRule from "vue-sketch-ruler";const rectWidth = 160;const rectHeight = 200;export default Vue.extend({    data() {        return {            scale: 2, //658813476562495, //1,            startX: 0,            startY: 0,            lines: {                h: [100, 200],                v: [100, 200]            },            thick: 20,            lang: "zh-CN",            isShowRuler: true,            isShowReferLine: true        }    },    components: {        SketchRule    }});

参考壹个完整的例子，点击这里

更加具体的api就请参考github上的文档了