vue3-sketch-ruler
在使用vue3中,用于页面展示的缩放操作
简体中文 | English
-
💪 Vue 3 Composition API -
🔥 Written in TypeScript
Vue 3 + Vite + ts 打包sketchRuler
说明
插件应用范围: 适合作为低代码平台操作页面缩放工具,比如做图工具如, 大屏可视化, 做图工具图怪兽等,类似ps的缩放效果. 2x还在bug修复阶段,将在近期推出,2x将抛出两个组件,一个组件兼容1x功能,另外一个组件将加入新特性,真正实现0配置,敬请期待!
应用案例: avue大屏可视化工具
由于项目升级成vite, 发现原来的插件vue-sketch-ruler,用到vue3中会报错, 这边我重新用vite打包了一份, 打包后的插件和原来功一样, 且支持在vue3和vite中使用
这边对原代码进行了改进优化,功能目前和之前vue3-sketch-ruler一样,还没时间优化,主要改进分为以下几点
- vue3的eslint修复和styleLint和pretty的代码格式化,支持适应vue3中使用sketchRuler,同时改写为vue3 Composition API 的写法
- 用typerscript进行重构,对类型进行定义,同时方便后续扩展
- 对shadow和palette参数进行对象合并计算,在以前palette的参数要么都传,要么不传,我这里改进后可以只传需要修改的属性即可,没有修改的可以不传
- 对类型进行打包设置(支持ts类型提示)
注意
本插件提供两个组件,其中SketchRule和vue-sketch-ruler 一样功能, 新功能将在sketch-ruler-wrapper中增加,使用该组件可以做到0配置,内部引入vue-sketch-ruler,做到自动识别外部容器大小和传入组件大小,做到节省配置时间,开箱即用, 同时兼容以前老的写法
demo
案例浏览: https://majun2232.github.io/vue3sketchRuler/1x
安装
支持全局导入和模块导入
npm install --save vue3-sketch-ruler
or
yarn add vue3-sketch-ruler -S
引入方式
将打包后的dist包拷贝,用import导入,支持下面两种引用方式
import { SketchRule } from 'vue3-sketch-ruler'
import 'vue3-sketch-ruler/lib/style.css'
components: { SketchRule }
也可以是这样子
import SketchRule from 'vue3-sketch-ruler'
import 'vue3-sketch-ruler/lib/style.css'
components: SketchRule
新增加的0配置组件sketch-ruler-wrapper引入方式
import { SketchRuleWrapper } from 'vue3-sketch-ruler'
import 'vue3-sketch-ruler/lib/style.css'
components: { SketchRuleWrapper }
支持的功能
- [x] 标尺渲染
- [x] 缩放内容,重绘标尺
- [x] 滚动内容,重绘标尺
- [x] 切换标尺状态,显示或隐藏
- [x] 参考线管理(增加删除)
- [x] 切换参考线状态,显示或隐藏
- [x] 兼容引入SketchRule老工程组件
- [x] 支持0配置引入尺规组件
未来支持的功能
- [] 加入画布鼠标拖动功能
- [] 标角支持事件
- [] 右下角有个鼠标进入缩放小功能
- [] 左上角的眼睛,点击能控制红线显影
- [] 加入单元测试功能
这是个开源业余做的功能,有兴趣加强该插件的小伙伴欢迎加入,也欢迎大家提pr或者issue
使用
<template>
<SketchRule
:thick="thick"
:scale="scale"
:width="582"
:height="482"
:startX="startX"
:startY="startY"
:shadow="shadow"
:lines="lines"
:cornerActive="true"
>
</template>
<script>
import Vue from 'vue';
import {SketchRule} from "vue-sketch-ruler";
const rectWidth = 160;
const rectHeight = 200;
export default {
data() {
return {
scale: 2, //658813476562495, //1,
startX: 0,
startY: 0,
lines: {
h: [100, 200],
v: [100, 200]
},
thick: 20,
isShowRuler: true,
isShowReferLine: true
}
},
components: {
SketchRule
}
});
</script>
参考一个完整的例子,点击这里 vue3 api 的例子,点击这里
api
属性
属性名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
scale | 初始化标尺的缩放 | Number | 2 |
thick | 标尺的厚度 | Number | 16 |
width | 放置标尺窗口的宽度 | Number | - |
height | 放置标尺窗口的高度 | Number | - |
startX | x轴标尺开始的坐标数值 | Number | 0 |
startY | y轴标尺开始的坐标数值 | Number | 0 |
shadow | 阴影的参数 | Shadow | 0 |
lines | 初始化水平标尺上的参考线 | object | {h:[],v:[]} |
palette | 标尺的样式配置参数 | 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)',}
更新说明
v1.1.11
- 废弃掉 :horLineArr="lines.h" 和 :verLineArr="lines.v" 统一整合为lines对象传入,回调handleLine也废弃掉, 没什么用,如果不想要lines,就直接让lines={}
- 干掉一些没用的样式(是真没用,之前的工程也没用,我只是翻过来没用仔细研究代码,所以不会影响之前迁移的项目)
v1.2.1
- 把方法进行合并,干掉一些不必要的事件,采用v-model传递参数,优化代码
- 把lodash去掉,原打包体积由43k减少到19.6k, 稳定版,强烈推荐升级
Event
事件名称 | 描述 | 回调参数 |
---|---|---|
handleCornerClick | 左上角点击事件 |
引用
vue标尺组件 vue-sketch-ruler
一个来自墨刀的react标尺组件 mb-sketch-ruler .