In using vue3, the zoom operation used for page presentation
升级过程简单写了一篇掘金文章, 同行或感兴趣的可以留言交流
掘金:2X vue3-sketch-ruler插件的蜕变与升级
案例浏览: 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() {}
}
...
<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 "vue3-sketch-ruler";
import 'vue3-sketch-ruler/lib/style.css'
const rectWidth = 1600
const rectHeight = 800
const canvasWidth = 1000
const canvasHeight = 500
参考一个完整的例子，点击这里
属性名称 描述 类型 默认值 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事件名称 描述 回调参数 onCornerClick 左上角点击事件 zoomchange 画布移动,缩放事件 {dimsOut:{elem: {}, parent: {}},originalEvent:{},scale,x,y}更多pazoom插件的配置的panzoomOption参数，可以参考pazoom document
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 画布缩小
open a PR to add your library ;)
这是个开源业余做的功能，欢迎加强该插件的小伙伴加入, 如果插件vue3-sketch-ruler对您有帮助，请给个star，您的鼓励是我最大的动力。
vue标尺组件 vue-sketch-ruler
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4
