一个关于vue的标尺插件 - vue-sketch-ruler

vue-sketch-ruler

一个vue组件的素描标尺

github地址

https://github.com/chuxiaoguo/vue-sketch-ruler

在线demo

点击这里查看

安装

支持全局导入和模块导入

npm install --save vue-sketch-ruler

支持的功能

• [✔] 标尺渲染
• [✔] 缩放内容，重绘标尺
• [✔] 滚动内容，重绘标尺
• [✔] 切换标尺状态，显示或隐藏
• [✔] 参考线管理（增加删除）
• [✔] 切换参考线状态，显示或隐藏

未来支持的功能

• [] 支持标尺的右键菜单
• [] 标角支持事件
• [] 分离css样式，支持导入样式
• [] 国际化

使用

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

api

接口

interface Lines {
    h: number[],
    v:  Array,
}
interface Shadow {
    x: number,
    y: number,
    width: number,
    height: number
}
interface Palette {
    bgColor: string, // ruler bg color
    longfgColor: string, // ruler longer mark color
    shortfgColor: string, // ruler shorter mark color
    fontColor: string, // ruler font color
    shadowColor: string, // ruler shadow color
    lineColor: string,
    borderColor: string',
    cornerActiveColor: string,
}

属性

属性名称	描述	类型	默认值
lang	初始化的语言	String	zh-CN
scale	初始化标尺的缩放	Number	2
thick	标尺的厚度	Number	16
width	放置标尺窗口的宽度	Number	-
height	放置标尺窗口的高度	Number	-
startX	x轴标尺开始的坐标数值	Number	0
startY	y轴标尺开始的坐标数值	Number	0
shadow	阴影的参数	Shadow	0
horLineArr	初始化水平标尺上的参考线	Array	[]
verLineArr	初始化垂直标尺上的参考线	Array	[]
palette	标尺的样式配置参数	Palette	{bgColor: 'rgba(225,225,225, 0)',longfgColor: '#BABBBC',shortfgColor: '#C8CDD0',fontColor: '#7D8694', shadowColor: '#E8E8E8',lineColor: '#EB5648', borderColor: '#DADADC',cornerActiveColor: 'rgb(235, 86, 72, 0.6)',}

Event

事件名称	描述	回调参数
handleLine	在横纵标尺上操作参考线（新增或移除）	Lines

引用

一个来自墨刀的react标尺组件 mb-sketch-ruler .