代码拉取完成,页面将自动刷新
同步操作将从 NMS丶No3/vue-sketch-ruler 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
English | 简体中文
一个vue组件的素描标尺
支持全局导入和模块导入
npm install --save vue-sketch-ruler
<template>
<SketchRule
:lang="lang"
:thick="thick"
:scale="scale"
:width="582"
:height="482"
:startX="startX"
:startY="startY"
:shadow="shadow"
:horLineArr="lines.h"
:verLineArr="lines.v"
:cornerActive="true"
@handleLine="handleLine"
@onCornerClick="handleCornerClick"
>
</template>
<script>
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
}
});
</script>
参考一个完整的例子,点击这里
interface Lines {
h: number[],
v: Array<Number>,
}
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)',} |
事件名称 | 描述 | 回调参数 |
---|---|---|
handleLine | 在横纵标尺上操作参考线(新增或移除) | Lines |
一个来自墨刀的react标尺组件 mb-sketch-ruler .
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。