2.2.6 • Published 3 months ago

vue3-sketch-ruler v2.2.6

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

vue3-sketch-ruler

In using vue3, the zoom operation used for page presentation

npm.io build status

Cloud Studio Template

🚀 Features

  • 💪 Vue 3 Composition API
  • 🔥 Written in TypeScript
  • 💡 以鼠标为中心缩放页面, 可以使用pazoom的特性
  • 📦 减化配置
  • 💎 提供还原, 放大, 缩小的功能
  • 📦 平台与业务代码通过插槽的方式进行分离, 也就是你只需要专注你的业务代码, 其他交给平台

issues

  1. 1X版本的问题, 已经不会再修改, 除非自己提pr我来合或者升级更强大的2X版本
  2. 2X正常修改, 欢迎提pr

✨ 升级特性(同1X比较)

  1. 在原来1X版本中满足基本的缩放和标注辅助线的功能, 但是缩放时, 是固定以画面左上角位缩放点, 这样子在实际操作中会很不方便,所以这里对缩放功能进行了改进,以鼠标为中心缩放页面,这样在操作中会更方便。缩放采用改造过的pazoom插件,加了些方法使得更适配我的插件, 详情见pazoom
  2. 对辅助线做了调整, 减少了细刻度的绘制, 因为已经有刻度显示, 删除后画面更加简洁
  3. 辅助线位置显示跟随鼠标移动
  4. 删除辅助线是以拖拽线条到编辑框外即可
  5. 新增还原, 放大, 缩小的API,自动居中对齐
  6. 修改引用方式, 减少繁琐的配置
  7. 对标墨刀, 修改新增和删除参考线
  8. 初始化自动居中对齐
  9. 新增辅助线对刻度有吸附效果
  10. 新增阴影刻度显示效果

升级过程简单写了一篇掘金文章, 同行或感兴趣的可以留言交流

掘金:1X 大屏页面缩放插件---升级改造

掘金:2X vue3-sketch-ruler插件的蜕变与升级

🔑 说明

  1. 插件应用范围: 适合作为低代码平台操作页面缩放工具,比如做图工具如, 大屏可视化, 做图工具图怪兽等,类似ps的缩放效果.
  2. 由1X 版本升级2X可以参考GoView 2X 应用源码地址 的提交修改记录进行
  3. 此master最新2X版本只在vue3中使用, 如果需要学习vue-demi关于vue2/vue3通用组件的,或者希望用到原来风格的, 请切换到1x分支, 使用1X版本。
  4. 注意2X版本作为加强版,重构了内核与1X版本使用方法有较大的变革,不兼容,请谨慎升级!继续使用1X版本的同学,请切换到1x分支阅读使用文档1x

🦄 demo

案例浏览: https://kakajun.github.io/vue3-sketch-ruler image

CodePen 示例

安装

支持全局导入和模块导入

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初始化标尺的缩放及画布Number1
rate初始化标尺的缩放Number1
thick标尺的厚度Number16
width放置标尺窗口的宽度Number1400
height放置标尺窗口的高度Number900
paddingRatio画布与外框间隔Number20% (基于外框宽高最小长度)
autoCenter自动居中对齐Booleantrue (设为false,那么需要在panzoomOption中传入startX,startY)
eyeIcon睁眼图标String-
closeEyeIcon闭眼图标String-
canvasWidth画布宽Number1000
canvasHeight画布高Number700
isShowReferLine是否显示标线Booleantrue
showRuler是否显示尺规Booleantrue
showShadowText是否显示阴影文字Booleantrue
lines初始化水平标尺上的参考线object{h:[],v:[]}
snapsObj吸附刻度集合object{h:[],v:[]}
snapThreshold吸附距离Number5
shadow阴影配置object{x: 0,y: 0, width: 0, height: 0}
gridRatio刻度分散比例(颗粒度)Number1
selfHandle自己处理监听移动和缩放Booleanfalse
panzoomOptionpanzoom相关的扩展参数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}

使用说明

  1. 同时按Ctrl+鼠标滚轮缩放, 根据鼠标位置发生页面缩放
  2. 同时按空格+鼠标左键, 拖动画布
  3. 有些需要自己定义监听移动和缩放,不想按空格移动, 或者不想Ctrl+weel 移动, 那么可以设置selfHandle为true,然后通过ref获取到组件实例,然后通过实例调用组件的方法, 自定义监听按键
  4. 具体操作参见我插件里面的监听移动和缩放方法
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画布缩小

插件兼容问题

  1. 不能和selecto一起使用,会冲突

🌈 Who is using this?

avue大屏可视化工具 image

GoView 高效拖拽式低代码数据可视化开发平台

GoView 2X 应用源码地址

open a PR to add your library ;)

QQ 技术交流群:

贡献者

最后

这是个开源业余做的功能,欢迎加强该插件的小伙伴加入, 如果插件vue3-sketch-ruler对您有帮助,请给个star,您的鼓励是我最大的动力。

引用

vue标尺组件 vue-sketch-ruler

2.2.1

3 months ago

2.2.0

3 months ago

2.2.3

3 months ago

2.2.2

3 months ago

2.2.5

3 months ago

2.2.4

3 months ago

2.2.6

3 months ago

1.3.16

4 months ago

2.1.2

4 months ago

2.1.1

4 months ago

2.1.3

4 months ago

2.0.1-beta.8

5 months ago

2.0.3

5 months ago

2.0.2

5 months ago

2.0.5

5 months ago

2.0.4

5 months ago

2.0.7

5 months ago

2.0.6

5 months ago

2.0.9

4 months ago

2.0.8

5 months ago

2.0.1-beta.3

5 months ago

2.0.1-beta.0

6 months ago

2.0.1-beta.1

6 months ago

2.0.1-beta.6

5 months ago

2.0.1-beta.7

5 months ago

2.0.1

5 months ago

2.0.1-beta.4

5 months ago

2.0.1-beta.5

5 months ago

2.0.10

4 months ago

2.1.0

4 months ago

1.3.15

10 months ago

1.3.14

12 months ago

1.3.13

12 months ago

1.3.11

12 months ago

1.3.12

12 months ago

1.3.10

12 months ago

1.3.9

2 years ago

1.3.8

2 years ago

1.3.7

2 years ago

1.3.6

2 years ago

1.3.5

2 years ago

1.3.4

3 years ago

1.2.7

3 years ago

1.2.6

3 years ago

1.2.5

3 years ago

1.3.3

3 years ago

1.3.2

3 years ago

1.3.1

3 years ago

1.3.0

3 years ago

1.1.30

3 years ago

1.3.1-bata

3 years ago

1.3.0-bata

3 years ago

1.2.4

3 years ago

1.2.0

3 years ago

1.1.9

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.1.12

3 years ago

1.1.11

3 years ago

1.1.10

3 years ago

1.1.16

3 years ago

1.1.14

3 years ago

1.1.13

3 years ago

1.1.19

3 years ago

1.1.18

3 years ago

1.1.17

3 years ago

1.1.21

3 years ago

1.1.20

3 years ago

1.1.1

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.0

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.0.3

3 years ago

0.0.1

3 years ago