vue3-sketch-ruler v2.2.6
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() {}
}
...
支持的功能
- 标尺渲染
- 缩放内容,重绘标尺
- 按Ctrl+鼠标滚轮缩放, 根据鼠标位置发生变化
- 按空格拖动画布
- 切换标尺状态,显示或隐藏
- 参考线管理(增加删除)
- 支持参考线任意地方拖拽
- 左上角的眼睛,点击能控制红线显影
- 初始化自动居中
- 提供右下角按钮缩放,还原所需API
- 刻度吸附效果
- 选中阴影阴影响应
- 阴影刻度数字响应
未来计划
- [] 加入单元测试功能
使用
<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 |
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
9 months ago
9 months ago
8 months ago
9 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago