vue3-sketch-ruler
v2.2.7
Published
> In using vue3, the zoom operation used for page presentation
Downloads
1,545
Maintainers
Readme
vue3-sketch-ruler
In using vue3, the zoom operation used for page presentation
🚀 Features
- 💪 Vue 3 Composition API
- 🔥 Written in TypeScript
- 💡 以鼠标为中心缩放页面, 可以使用pazoom的特性
- 📦 减化配置
- 💎 提供还原, 放大, 缩小的功能
- 📦 平台与业务代码通过插槽的方式进行分离, 也就是你只需要专注你的业务代码, 其他交给平台
issues
- 1X版本的问题, 已经不会再修改, 除非自己提pr我来合或者升级更强大的2X版本
- 2X正常修改, 欢迎提pr
✨ 升级特性(同1X比较)
- 在原来1X版本中满足基本的缩放和标注辅助线的功能, 但是缩放时, 是固定以画面左上角位缩放点, 这样子在实际操作中会很不方便,所以这里对缩放功能进行了改进,以鼠标为中心缩放页面,这样在操作中会更方便。缩放采用改造过的pazoom插件,加了些方法使得更适配我的插件, 详情见pazoom
- 对辅助线做了调整, 减少了细刻度的绘制, 因为已经有刻度显示, 删除后画面更加简洁
- 辅助线位置显示跟随鼠标移动
- 删除辅助线是以拖拽线条到编辑框外即可
- 新增还原, 放大, 缩小的API,自动居中对齐
- 修改引用方式, 减少繁琐的配置
- 对标墨刀, 修改新增和删除参考线
- 初始化自动居中对齐
- 新增辅助线对刻度有吸附效果
- 新增阴影刻度显示效果
升级过程简单写了一篇掘金文章, 同行或感兴趣的可以留言交流
掘金:2X vue3-sketch-ruler
插件的蜕变与升级
🔑 说明
- 插件应用范围: 适合作为低代码平台操作页面缩放工具,比如做图工具如, 大屏可视化, 做图工具图怪兽等,类似ps的缩放效果.
- 由1X 版本升级2X可以参考GoView 2X 应用源码地址 的提交修改记录进行
- 此master最新2X版本只在vue3中使用, 如果需要学习vue-demi关于vue2/vue3通用组件的,或者希望用到原来风格的, 请切换到1x分支, 使用1X版本。
- 注意2X版本作为加强版,重构了内核与1X版本使用方法有较大的变革,不兼容,请谨慎升级!继续使用1X版本的同学,请切换到1x分支阅读使用文档1x
🦄 demo
案例浏览: https://kakajun.github.io/vue3-sketch-ruler
安装
支持全局导入和模块导入
npm install --save vue3-sketch-ruler
yarn add vue3-sketch-ruler -S
引入方式
将打包后的dist包拷贝,用import导入,支持下面两种引用方式
import SketchRule from 'vue3-sketch-ruler'
import 'vue3-sketch-ruler/lib/style.css'
// ts需要时引入类型
import type { SketchRulerProps } from 'vue3-sketch-ruler'
CDN 引入, 详情参见 CDN demo
<script src="https://unpkg.com/vue3-sketch-ruler/lib/index.umd.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/vue3-sketch-ruler/lib/style.css" />
const SketchRule = window.SketchRuler
const App = {
components: { 'sketch-rule': SketchRule },
setup() {}
}
...
支持的功能
- [x] 标尺渲染
- [x] 缩放内容,重绘标尺
- [x] 按Ctrl+鼠标滚轮缩放, 根据鼠标位置发生变化
- [x] 按空格拖动画布
- [x] 切换标尺状态,显示或隐藏
- [x] 参考线管理(增加删除)
- [x] 支持参考线任意地方拖拽
- [x] 左上角的眼睛,点击能控制红线显影
- [x] 初始化自动居中
- [x] 提供右下角按钮缩放,还原所需API
- [x] 刻度吸附效果
- [x] 选中阴影阴影响应
- [x] 阴影刻度数字响应
未来计划
- [] 加入单元测试功能
使用
<SketchRule
:thick="state.thick"
v-model:scale="state.scale"
:width="rectWidth"
:height="rectHeight"
:canvasWidth="canvasWidth"
:canvasHeight="canvasHeight"
ref="sketchrule"
:isShowReferLine="state.isShowReferLine"
@onCornerClick="handleCornerClick"
:lines="state.lines"
>
<template #default>
<div data-type="page" :style="canvasStyle">
<img class="img-style" :src="bgImg" alt="" />>
</div>
</template>
<template #btn="{ resetMethod, zoomInMethod, zoomOutMethod }">
<div class="btns">
<button class="btn reset-btn" @click="resetMethod">还原</button>
<button class="btn zoomin-btn" @click="zoomInMethod">放大</button>
<button class="btn zoomout-btn" @click="zoomOutMethod">缩小</button>
</div>
</template>
</SketchRule>
import Vue from 'vue';
import {SketchRule} from "vue-sketch-ruler";
import 'vue3-sketch-ruler/lib/style.css'
const rectWidth = 1600
const rectHeight = 800
const canvasWidth = 1000
const canvasHeight = 500
参考一个完整的例子,点击这里
api
属性
| 属性名称 | 描述 | 类型 | 默认值 | | --- | --- | --- | --- | | scale | 初始化标尺的缩放及画布 | Number | 1 (autoCenter 默认为true,初始值不生效) | | rate | 初始化标尺的缩放 | Number | 1 | | thick | 标尺的厚度 | Number | 16 | | width | 放置标尺窗口的宽度 | Number | 1400 | | height | 放置标尺窗口的高度 | Number | 900 | | paddingRatio | 画布与外框间隔 | Number | 20% (基于外框宽高最小长度) | | autoCenter | 自动居中对齐 | Boolean | true (设为false,那么需要在panzoomOption中传入startX,startY) | | eyeIcon | 睁眼图标 | String | - | | closeEyeIcon | 闭眼图标 | String | - | | canvasWidth | 画布宽 | Number | 1000 | | canvasHeight | 画布高 | Number | 700 | | isShowReferLine | 是否显示标线 | Boolean | true | | showRuler | 是否显示尺规 | Boolean | true | | showShadowText | 是否显示阴影文字 | Boolean | true | | lines | 初始化水平标尺上的参考线 | object | {h:[],v:[]} | | snapsObj | 吸附刻度集合 | object | {h:[],v:[]} | | snapThreshold | 吸附距离 | Number | 5 | | shadow | 阴影配置 | object | {x: 0,y: 0, width: 0, height: 0} | | gridRatio | 刻度分散比例(颗粒度) | Number | 1 | | selfHandle | 自己处理监听移动和缩放 | Boolean | false | | panzoomOption | panzoom相关的扩展参数 | object | - | | palette | 标尺的样式配置参数 | Object | 如下表 |
| 属性名称 | 描述 | 默认值 | | --------------- | ---------------- | ------------------------------ | | bgColor | 画布背景 | #f6f7f9 | | longfgColor | 刻度背景 | #BABBBC | | fontColor | 刻度字体颜色 | #7D8694 | | fontShadowColor | 刻度阴影字体颜色 | #106ebe | | shadowColor | 激活阴影背景 | #E8E8E8 | | lineColor | 对准线颜色 | #51d6a9 | | lineType | 对准线类型 | solid (solid \dashed \ dotted) | | lockLineColor | 锁定对准线颜色 | #d4d7dc | | hoverColor | 标签颜色字体 | #fff | | hoverBg | 标签颜色背景 | #000 | | borderColor | 尺子外边框颜色 | #eeeeef |
更多pazoom插件的配置的panzoomOption参数,可以参考pazoom document
Event
| 事件名称 | 描述 | 回调参数 | | ------------- | ----------------- | ----------------------------------------------------------- | | onCornerClick | 左上角点击事件 | | | zoomchange | 画布移动,缩放事件 | {dimsOut:{elem: {}, parent: {}},originalEvent:{},scale,x,y} |
使用说明
- 同时按Ctrl+鼠标滚轮缩放, 根据鼠标位置发生页面缩放
- 同时按空格+鼠标左键, 拖动画布
- 有些需要自己定义监听移动和缩放,不想按空格移动, 或者不想Ctrl+weel 移动, 那么可以设置selfHandle为true,然后通过ref获取到组件实例,然后通过实例调用组件的方法, 自定义监听按键
- 具体操作参见我插件里面的监听移动和缩放方法
const panzoomInstance = sketchruleRef.value.panzoomInstance
// 让按下中键才能移动画布, mousedown
document.addEventListener('pointerdown', function (e) {
if (e.button === 1) {
sketchruleRef.value.cursorClass = 'grabCursor'
panzoomInstance.bind()
panzoomInstance.handleDown(e)
e.preventDefault()
}
})
document.addEventListener('pointerup', function (e) {
if (e.button === 1) {
panzoomInstance.destroy()
sketchruleRef.value.cursorClass = 'defaultCursor'
}
})
插槽提供方法
| 事件名称 | 描述 | 回调参数 | | -------- | ------------ | -------- | | reset | 画布重置位置 | | | zoomIn | 画布放大 | | | zoomIn | 画布缩小 | |
插件兼容问题
- 不能和selecto一起使用,会冲突
🌈 Who is using this?
open a PR to add your library ;)
QQ 技术交流群:
贡献者
最后
这是个开源业余做的功能,欢迎加强该插件的小伙伴加入, 如果插件vue3-sketch-ruler
对您有帮助,请给个star,您的鼓励是我最大的动力。
引用
vue标尺组件 vue-sketch-ruler