@sketch-ruler/canvas 3.0.0-beta.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +384 -172
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,224 +1,436 @@
|
|
|
1
|
-
#
|
|
1
|
+
# vue3-sketch-ruler
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> 是一个基于 Vue 3 + TypeScript 的标尺组件库，适用于低代码平台、大屏可视化、做图工具等场景，提供类似 Photoshop 的缩放与标尺辅助线体验。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://camo.githubusercontent.com/28479a7a834310a667f36760a27283f7389e864a/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f76322d646174657069636b65722e737667) [](https://github.com/kakajun/vue3-sketch-ruler/actions/workflows/gh-pages.yml)
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
npm install @sketch-ruler/canvas
|
|
9
|
-
# 或
|
|
10
|
-
pnpm add @sketch-ruler/canvas
|
|
11
|
-
```
|
|
7
|
+
[](https://cloudstudio.net/a/21005994397405184?channel=share&sharetype=Markdown)
|
|
12
8
|
|
|
13
|
-
|
|
9
|
+
<div align=center>
|
|
10
|
+
<img src="https://github.com/kakajun/vue3-sketch-ruler/blob/master/packages/docs/src/assets/logo.png" width="392" height="300">
|
|
11
|
+
</div>
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
## 🚀 Features
|
|
16
14
|
|
|
17
|
-
|
|
15
|
+
- 💪 Vue 3 Composition API / `<script setup>`
|
|
16
|
+
- 🔥 基于 TypeScript，类型完整
|
|
17
|
+
- 🎯 内置 TransformEngine 变换引擎，零外部依赖
|
|
18
|
+
- 🖱️ 多种缩放模式：鼠标中心、视口中心、内容中心
|
|
19
|
+
- 📐 可配置参考线（拖拽创建、吸附、锁定）
|
|
20
|
+
- 🗺️ 内置 Minimap 缩略图导航（支持拖拽视口、点击跳转）
|
|
21
|
+
- 🔌 插件系统（生命周期钩子 + 自定义渲染器）
|
|
22
|
+
- 🎨 动画支持：ease-out / damped / exponential / direct
|
|
23
|
+
- 📦 平台与业务代码通过插槽分离，专注业务即可
|
|
18
24
|
|
|
19
|
-
|
|
20
|
-
import { InputManager } from '@sketch-ruler/canvas'
|
|
21
|
-
import { TransformEngine } from '@sketch-ruler/core'
|
|
22
|
-
|
|
23
|
-
const engine = new TransformEngine({ x: 0, y: 0, scale: 1 })
|
|
24
|
-
|
|
25
|
-
const inputManager = new InputManager(engine, {
|
|
26
|
-
zoomStep: 0.25, // 滚轮缩放步长
|
|
27
|
-
zoomMode: 'pointer', // 'pointer' | 'viewport-center' | 'content-center'
|
|
28
|
-
viewportSize: { width: 1470, height: 700 },
|
|
29
|
-
contentSize: { width: 1920, height: 1080 },
|
|
30
|
-
onCursorChange: (cls) => {
|
|
31
|
-
// cls: 'default' | 'grab' | 'grabbing'
|
|
32
|
-
container.className = cls
|
|
33
|
-
}
|
|
34
|
-
})
|
|
25
|
+
## 🦄 Demo
|
|
35
26
|
|
|
36
|
-
|
|
37
|
-
inputManager.bind(canvasElement)
|
|
27
|
+
案例浏览: [https://kakajun.github.io/vue3-sketch-ruler](https://kakajun.github.io/vue3-sketch-ruler) 
|
|
38
28
|
|
|
39
|
-
|
|
40
|
-
inputManager.setZoomMode('viewport-center')
|
|
29
|
+
[CodePen 示例](https://codepen.io/kakajun/pen/eYwagJb)
|
|
41
30
|
|
|
42
|
-
|
|
43
|
-
const cursorClass = inputManager.getCursorClass()
|
|
31
|
+
## 安装
|
|
44
32
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
```
|
|
33
|
+
```bash
|
|
34
|
+
npm install --save vue3-sketch-ruler
|
|
48
35
|
|
|
49
|
-
|
|
36
|
+
# 或
|
|
37
|
+
yarn add vue3-sketch-ruler
|
|
50
38
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
- `Ctrl+-`：缩小
|
|
57
|
-
- `Ctrl+1`：适配视口（留 5% 边距）
|
|
39
|
+
# 或
|
|
40
|
+
pnpm add vue3-sketch-ruler
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## 引入方式
|
|
58
44
|
|
|
59
|
-
###
|
|
45
|
+
### ESM
|
|
60
46
|
|
|
61
47
|
```ts
|
|
62
|
-
import {
|
|
48
|
+
import { SketchRuler, Minimap } from 'vue3-sketch-ruler'
|
|
49
|
+
import type { SketchRulerProps, SketchRulerPlugin } from 'vue3-sketch-ruler'
|
|
50
|
+
import 'vue3-sketch-ruler/lib/style.css'
|
|
51
|
+
```
|
|
63
52
|
|
|
64
|
-
|
|
65
|
-
|
|
53
|
+
### CDN
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<script src="https://unpkg.com/vue3-sketch-ruler/lib/index.umd.js"></script>
|
|
57
|
+
<link rel="stylesheet" href="https://unpkg.com/vue3-sketch-ruler/lib/style.css" />
|
|
58
|
+
|
|
59
|
+
<script>
|
|
60
|
+
const { SketchRuler, Minimap } = window.Vue3SketchRuler
|
|
61
|
+
</script>
|
|
62
|
+
```
|
|
66
63
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
64
|
+
## 使用
|
|
65
|
+
|
|
66
|
+
### 基础用法
|
|
67
|
+
|
|
68
|
+
```vue
|
|
69
|
+
<template>
|
|
70
|
+
<div class="wrapper" :style="{ width: width + 'px', height: height + 'px' }">
|
|
71
|
+
<SketchRuler
|
|
72
|
+
ref="sketchRef"
|
|
73
|
+
v-model:scale="state.scale"
|
|
74
|
+
:width="width"
|
|
75
|
+
:height="height"
|
|
76
|
+
:canvas-width="canvasWidth"
|
|
77
|
+
:canvas-height="canvasHeight"
|
|
78
|
+
:thick="state.thick"
|
|
79
|
+
:lines="state.lines"
|
|
80
|
+
:is-show-refer-line="state.isShowReferLine"
|
|
81
|
+
:enable-animation="true"
|
|
82
|
+
animation-mode="ease-out"
|
|
83
|
+
@zoomchange="handleZoomChange"
|
|
84
|
+
@update:lines="handleLinesChange"
|
|
85
|
+
>
|
|
86
|
+
<template #default>
|
|
87
|
+
<div data-type="page" :style="canvasStyle">
|
|
88
|
+
<img :src="bgImg" style="width:100%;height:100%" />
|
|
89
|
+
</div>
|
|
90
|
+
</template>
|
|
91
|
+
|
|
92
|
+
<template #toolbar="{ tools, state }">
|
|
93
|
+
<div class="btns">
|
|
94
|
+
<button @click="tools.reset">还原</button>
|
|
95
|
+
<button @click="tools.zoomIn">放大</button>
|
|
96
|
+
<button @click="tools.zoomOut">缩小</button>
|
|
97
|
+
<button @click="tools.zoomToPreset(1)">100%</button>
|
|
98
|
+
<span>{{ (state.scale * 100).toFixed(0) }}%</span>
|
|
99
|
+
</div>
|
|
100
|
+
</template>
|
|
101
|
+
</SketchRuler>
|
|
102
|
+
</div>
|
|
103
|
+
</template>
|
|
104
|
+
|
|
105
|
+
<script setup lang="ts">
|
|
106
|
+
import { reactive, ref } from 'vue'
|
|
107
|
+
import { SketchRuler } from 'vue3-sketch-ruler'
|
|
108
|
+
import 'vue3-sketch-ruler/lib/style.css'
|
|
109
|
+
|
|
110
|
+
const sketchRef = ref()
|
|
111
|
+
const width = 1470
|
|
112
|
+
const height = 700
|
|
113
|
+
const canvasWidth = 1000
|
|
114
|
+
const canvasHeight = 500
|
|
115
|
+
|
|
116
|
+
const state = reactive({
|
|
70
117
|
scale: 1,
|
|
71
|
-
offset: 0,
|
|
72
|
-
vertical: false, // false=水平标尺, true=垂直标尺
|
|
73
118
|
thick: 20,
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
palette: {
|
|
77
|
-
bgColor: '#f6f7f9',
|
|
78
|
-
tickColor: '#BABBBC',
|
|
79
|
-
labelColor: '#7D8694',
|
|
80
|
-
borderColor: '#eeeeef'
|
|
81
|
-
}
|
|
119
|
+
isShowReferLine: true,
|
|
120
|
+
lines: { h: [0, 250], v: [0, 500] }
|
|
82
121
|
})
|
|
122
|
+
|
|
123
|
+
const canvasStyle = {
|
|
124
|
+
width: canvasWidth + 'px',
|
|
125
|
+
height: canvasHeight + 'px'
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
const handleZoomChange = (detail: { scale: number; x: number; y: number }) => {
|
|
129
|
+
console.log('zoomchange', detail)
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
const handleLinesChange = (lines: { h: number[]; v: number[] }) => {
|
|
133
|
+
console.log('lines changed', lines)
|
|
134
|
+
}
|
|
135
|
+
</script>
|
|
83
136
|
```
|
|
84
137
|
|
|
85
|
-
###
|
|
138
|
+
### 配合 Minimap
|
|
139
|
+
|
|
140
|
+
```vue
|
|
141
|
+
<template>
|
|
142
|
+
<SketchRuler ref="sketchRef" v-model:scale="state.scale" ...>
|
|
143
|
+
<template #default>...</template>
|
|
144
|
+
</SketchRuler>
|
|
145
|
+
|
|
146
|
+
<Minimap
|
|
147
|
+
:content-width="canvasWidth"
|
|
148
|
+
:content-height="canvasHeight"
|
|
149
|
+
:viewport-x="viewportOffset.x"
|
|
150
|
+
:viewport-y="viewportOffset.y"
|
|
151
|
+
:viewport-width="width"
|
|
152
|
+
:viewport-height="height"
|
|
153
|
+
:scale="state.scale"
|
|
154
|
+
:width="200"
|
|
155
|
+
:height="150"
|
|
156
|
+
@navigate="handleNavigate"
|
|
157
|
+
/>
|
|
158
|
+
</template>
|
|
159
|
+
|
|
160
|
+
<script setup>
|
|
161
|
+
import { SketchRuler, Minimap } from 'vue3-sketch-ruler'
|
|
162
|
+
|
|
163
|
+
const sketchRef = ref()
|
|
164
|
+
const viewportOffset = reactive({ x: 0, y: 0 })
|
|
165
|
+
|
|
166
|
+
const handleZoomChange = (detail) => {
|
|
167
|
+
viewportOffset.x = detail.x
|
|
168
|
+
viewportOffset.y = detail.y
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
const handleNavigate = (x, y) => {
|
|
172
|
+
sketchRef.value?.setTransform({ x, y })
|
|
173
|
+
}
|
|
174
|
+
</script>
|
|
175
|
+
```
|
|
86
176
|
|
|
87
|
-
|
|
177
|
+
### 插件系统
|
|
88
178
|
|
|
89
179
|
```ts
|
|
90
|
-
import {
|
|
180
|
+
import type { SketchRulerPlugin } from 'vue3-sketch-ruler'
|
|
91
181
|
|
|
92
|
-
const
|
|
182
|
+
const plugins: SketchRulerPlugin[] = [
|
|
183
|
+
{
|
|
184
|
+
name: 'demo-logger',
|
|
185
|
+
onLineCreate: (ctx) => console.log('line created', ctx.line.id),
|
|
186
|
+
onLineDelete: (ctx) => console.log('line deleted', ctx.line.id)
|
|
187
|
+
}
|
|
188
|
+
]
|
|
189
|
+
```
|
|
93
190
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
191
|
+
## API
|
|
192
|
+
|
|
193
|
+
### Props
|
|
194
|
+
|
|
195
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
196
|
+
| --- | --- | --- | --- |
|
|
197
|
+
| width | 容器宽度 | `number` | `1400` |
|
|
198
|
+
| height | 容器高度 | `number` | `800` |
|
|
199
|
+
| canvasWidth | 画布宽度 | `number` | `700` |
|
|
200
|
+
| canvasHeight | 画布高度 | `number` | `700` |
|
|
201
|
+
| thick | 标尺厚度 | `number` | `16` |
|
|
202
|
+
| scale | 缩放值（支持 `v-model:scale`） | `number` | `1` |
|
|
203
|
+
| showRuler | 是否显示标尺 | `boolean` | `true` |
|
|
204
|
+
| isShowReferLine | 是否显示参考线 | `boolean` | `true` |
|
|
205
|
+
| lines | 初始化参考线 | `{ h: number[]; v: number[] }` | `{ h: [], v: [] }` |
|
|
206
|
+
| palette | 标尺样式配置 | `Partial<RulerPalette>` | `{}` |
|
|
207
|
+
| shadow | 阴影高亮区域 | `{ x, y, width, height }` | `{ x:0, y:0, width:0, height:0 }` |
|
|
208
|
+
| zoomMode | 缩放原点模式 | `'pointer' \| 'viewport-center' \| 'content-center'` | `'pointer'` |
|
|
209
|
+
| zoomStep | 缩放步长 | `number` | `0.25` |
|
|
210
|
+
| minZoom | 最小缩放 | `number` | `0.1` |
|
|
211
|
+
| maxZoom | 最大缩放 | `number` | `10` |
|
|
212
|
+
| enableAnimation | 是否启用动画 | `boolean` | `false` |
|
|
213
|
+
| animationMode | 动画模式 | `'direct' \| 'ease-out' \| 'damped' \| 'exponential'` | `'ease-out'` |
|
|
214
|
+
| autoCenter | 初始化自动居中 | `boolean` | `true` |
|
|
215
|
+
| initialOffset | 初始偏移（autoCenter=false 时生效） | `{ x: number; y: number }` | `{ x:0, y:0 }` |
|
|
216
|
+
| snapThreshold | 吸附阈值 | `number` | `5` |
|
|
217
|
+
| lockLine | 是否锁定参考线 | `boolean` | `false` |
|
|
218
|
+
| selfHandle | 自行处理输入事件 | `boolean` | `false` |
|
|
219
|
+
| plugins | 插件列表 | `SketchRulerPlugin[]` | `[]` |
|
|
220
|
+
|
|
221
|
+
### Events
|
|
222
|
+
|
|
223
|
+
| 事件 | 描述 | 回调参数 |
|
|
224
|
+
| --------------- | ------------------ | ------------------------------ |
|
|
225
|
+
| update:scale | 缩放值双向绑定 | `number` |
|
|
226
|
+
| update:offset | 偏移值双向绑定 | `{ x: number; y: number }` |
|
|
227
|
+
| zoomchange | 缩放/平移变化 | `{ scale, x, y }` |
|
|
228
|
+
| update:lines | 参考线变化 | `{ h: number[]; v: number[] }` |
|
|
229
|
+
| update:lockLine | 参考线锁定状态变化 | `boolean` |
|
|
230
|
+
| onCornerClick | 左上角按钮点击 | `boolean`（参考线显示状态） |
|
|
231
|
+
|
|
232
|
+
### Slots
|
|
233
|
+
|
|
234
|
+
| 插槽名 | 描述 | 作用域参数 |
|
|
235
|
+
| --- | --- | --- |
|
|
236
|
+
| default | 画布内容（**必须用 `<template #default>` 包裹**） | — |
|
|
237
|
+
| toolbar | 右下角工具栏 | `{ tools: { reset, zoomIn, zoomOut, zoomToPreset, setZoomMode, toggleReferLine }, state: { scale, offset, zoomMode, showReferLine } }` |
|
|
238
|
+
|
|
239
|
+
### Expose
|
|
240
|
+
|
|
241
|
+
通过 `ref` 可以调用以下方法：
|
|
242
|
+
|
|
243
|
+
| 方法 | 描述 |
|
|
244
|
+
| ---------------------------------- | -------------------- |
|
|
245
|
+
| `setTransform({ x?, y?, scale? })` | 设置变换状态 |
|
|
246
|
+
| `zoomIn()` | 放大 |
|
|
247
|
+
| `zoomOut()` | 缩小 |
|
|
248
|
+
| `reset()` | 重置到初始状态 |
|
|
249
|
+
| `zoomToPreset(scale)` | 缩放到预设比例 |
|
|
250
|
+
| `setZoomMode(mode)` | 设置缩放模式 |
|
|
251
|
+
| `engine` | TransformEngine 实例 |
|
|
252
|
+
| `stateManager` | 参考线状态管理器 |
|
|
253
|
+
|
|
254
|
+
### Palette
|
|
255
|
+
|
|
256
|
+
| 属性 | 描述 | 默认值 |
|
|
257
|
+
| -------------------- | -------------- | ---------- |
|
|
258
|
+
| bgColor | 画布背景 | `#f6f7f9` |
|
|
259
|
+
| tickColor | 刻度颜色 | `#BABBBC` |
|
|
260
|
+
| labelColor | 刻度标签颜色 | `#7D8694` |
|
|
261
|
+
| guideLineColor | 参考线颜色 | `#51d6a9` |
|
|
262
|
+
| guideLineLockedColor | 锁定参考线颜色 | `#d4d7dc` |
|
|
263
|
+
| hoverBg | 标签背景色 | `#000` |
|
|
264
|
+
| hoverColor | 标签文字色 | `#fff` |
|
|
265
|
+
| borderColor | 尺子边框颜色 | `#eeeeef` |
|
|
266
|
+
| guideLineStyle | 参考线样式 | `'dashed'` |
|
|
267
|
+
| guideLineWidth | 参考线宽度 | `1` |
|
|
268
|
+
| labelEnabled | 是否显示标签 | `true` |
|
|
269
|
+
|
|
270
|
+
## Minimap API
|
|
271
|
+
|
|
272
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
273
|
+
| -------------- | ----------- | -------- | ------ |
|
|
274
|
+
| contentWidth | 内容宽度 | `number` | — |
|
|
275
|
+
| contentHeight | 内容高度 | `number` | — |
|
|
276
|
+
| viewportX | 视口 X 偏移 | `number` | — |
|
|
277
|
+
| viewportY | 视口 Y 偏移 | `number` | — |
|
|
278
|
+
| viewportWidth | 视口宽度 | `number` | — |
|
|
279
|
+
| viewportHeight | 视口高度 | `number` | — |
|
|
280
|
+
| scale | 缩放比例 | `number` | — |
|
|
281
|
+
| width | 缩略图宽度 | `number` | `200` |
|
|
282
|
+
| height | 缩略图高度 | `number` | `150` |
|
|
283
|
+
|
|
284
|
+
| 事件 | 描述 | 回调参数 |
|
|
285
|
+
| --------- | -------------- | ------------------------ |
|
|
286
|
+
| navigate | 导航到指定位置 | `(x: number, y: number)` |
|
|
287
|
+
| dragstart | 开始拖拽 | — |
|
|
288
|
+
| dragend | 结束拖拽 | — |
|
|
289
|
+
|
|
290
|
+
## 2.x → 3.x 迁移指南
|
|
291
|
+
|
|
292
|
+
v3.x 是架构重构版本，内置 TransformEngine 替代了外部 `simple-panzoom` 依赖，并引入了 Minimap、插件系统、动画系统等全新能力。以下是核心差异与迁移要点：
|
|
293
|
+
|
|
294
|
+
### 主要 Breaking Changes
|
|
295
|
+
|
|
296
|
+
| 变更项 | 2.x 写法 | 3.x 写法 | 说明 |
|
|
297
|
+
| --- | --- | --- | --- |
|
|
298
|
+
| **组件名** | `<SketchRule>` / `<sketch-rule>` | `<SketchRuler>` | 统一为 PascalCase 完整拼写 |
|
|
299
|
+
| **导入方式** | `import SketchRule from 'vue3-sketch-ruler'` | `import { SketchRuler } from 'vue3-sketch-ruler'` | 改为命名导出，同时仍保留默认导出兼容 |
|
|
300
|
+
| **工具栏插槽** | `#btn="{ reset, zoomIn, zoomOut }"` | `#toolbar="{ tools, state }"` | `tools` 包含 `reset`、`zoomIn`、`zoomOut`、`zoomToPreset`、`setZoomMode`、`toggleReferLine`；`state` 包含 `scale`、`offset`、`zoomMode`、`showReferLine` |
|
|
301
|
+
| **缩放事件** | `@zoomStart` | `v-model:scale` / `@update:scale` | 支持双向绑定，无需手动监听缩放开始 |
|
|
302
|
+
| **参考线事件** | `@handleLine` | `@update:lines` | 统一为 `update:` 风格事件 |
|
|
303
|
+
| **偏移事件** | 无 | `@update:offset` / `@zoomchange` | 3.x 新增，返回 `{ scale, x, y }` |
|
|
304
|
+
| **锁定事件** | 无 | `v-model:lockLine` / `@update:lockLine` | 3.x 新增双向绑定 |
|
|
305
|
+
| **缩放控制** | `panzoomOption` | `zoomMode`、`zoomStep`、`minZoom`、`maxZoom` | 移除 `panzoomOption`，改为内置引擎直接配置 |
|
|
306
|
+
| **动画系统** | 无 | `enableAnimation`、`animationMode` | 3.x 新增，支持 `ease-out`、`damped`、`exponential`、`direct` |
|
|
307
|
+
| **自动居中** | 依赖 panzoom 的 `startX/startY` | `autoCenter`、`initialOffset` | `autoCenter` 为 `true` 时自动计算初始偏移 |
|
|
308
|
+
| **阴影文字** | `showShadowText` | 移除 | 3.x 已移除该属性 |
|
|
309
|
+
| **palette 属性** | `lineType`、`lineColor`、`longfgColor`、`fontColor` | `guideLineStyle`、`guideLineColor`、`tickColor`、`labelColor` | 命名规范化 |
|
|
310
|
+
| **Expose** | `panzoomInstance` | `engine`（TransformEngine） | 直接暴露内置引擎实例 |
|
|
311
|
+
| **Expose 方法** | `zoomIn()`、`zoomOut()`、`reset()` | 同上，并新增 `setTransform()`、`zoomToPreset()`、`setZoomMode()` | 方法更丰富 |
|
|
312
|
+
| **外部依赖** | `simple-panzoom` | 零外部 panzoom 依赖 | 需从项目中移除 `simple-panzoom` |
|
|
313
|
+
|
|
314
|
+
### 快速迁移示例
|
|
315
|
+
|
|
316
|
+
**2.x 代码：**
|
|
317
|
+
|
|
318
|
+
```vue
|
|
319
|
+
<template>
|
|
320
|
+
<sketch-rule
|
|
321
|
+
ref="sketchruleRef"
|
|
322
|
+
v-model:scale="state.scale"
|
|
323
|
+
:panzoomOption="panzoomOption"
|
|
324
|
+
:palette="{ lineType: 'dashed', lineColor: '#51d6a9' }"
|
|
325
|
+
@handleLine="handleLinesChange"
|
|
326
|
+
>
|
|
327
|
+
<template #default>...</template>
|
|
328
|
+
<template #btn="{ reset, zoomIn, zoomOut }">
|
|
329
|
+
<button @click="reset">还原</button>
|
|
330
|
+
<button @click="zoomIn">放大</button>
|
|
331
|
+
<button @click="zoomOut">缩小</button>
|
|
332
|
+
</template>
|
|
333
|
+
</sketch-rule>
|
|
334
|
+
</template>
|
|
335
|
+
|
|
336
|
+
<script setup>
|
|
337
|
+
import SketchRule from 'vue3-sketch-ruler'
|
|
338
|
+
import { simplePanzoom } from 'simple-panzoom' // 需移除
|
|
339
|
+
</script>
|
|
340
|
+
```
|
|
100
341
|
|
|
101
|
-
|
|
102
|
-
|
|
342
|
+
**3.x 代码：**
|
|
343
|
+
|
|
344
|
+
```vue
|
|
345
|
+
<template>
|
|
346
|
+
<SketchRuler
|
|
347
|
+
ref="sketchRef"
|
|
348
|
+
v-model:scale="state.scale"
|
|
349
|
+
v-model:offset="state.offset"
|
|
350
|
+
:zoom-mode="'pointer'"
|
|
351
|
+
:enable-animation="true"
|
|
352
|
+
animation-mode="ease-out"
|
|
353
|
+
:palette="{ guideLineStyle: 'dashed', guideLineColor: '#51d6a9' }"
|
|
354
|
+
@update:lines="handleLinesChange"
|
|
355
|
+
@zoomchange="handleZoomChange"
|
|
356
|
+
>
|
|
357
|
+
<template #default>...</template>
|
|
358
|
+
<template #toolbar="{ tools }">
|
|
359
|
+
<button @click="tools.reset">还原</button>
|
|
360
|
+
<button @click="tools.zoomIn">放大</button>
|
|
361
|
+
<button @click="tools.zoomOut">缩小</button>
|
|
362
|
+
<button @click="tools.zoomToPreset(1)">100%</button>
|
|
363
|
+
<span>{{ (tools.state.scale * 100).toFixed(0) }}%</span>
|
|
364
|
+
</template>
|
|
365
|
+
</SketchRuler>
|
|
366
|
+
</template>
|
|
367
|
+
|
|
368
|
+
<script setup>
|
|
369
|
+
import { SketchRuler } from 'vue3-sketch-ruler'
|
|
370
|
+
</script>
|
|
103
371
|
```
|
|
104
372
|
|
|
105
|
-
###
|
|
373
|
+
### 自动化迁移脚本
|
|
106
374
|
|
|
107
|
-
|
|
375
|
+
项目提供了官方迁移脚本，可自动处理大部分替换：
|
|
108
376
|
|
|
109
|
-
```
|
|
110
|
-
|
|
377
|
+
```bash
|
|
378
|
+
npx vue3-sketch-ruler-migrate <path>
|
|
379
|
+
```
|
|
111
380
|
|
|
112
|
-
|
|
381
|
+
脚本会自动处理：
|
|
113
382
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
383
|
+
- 组件名 `SketchRule` → `SketchRuler`
|
|
384
|
+
- 插槽 `#btn` → `#toolbar`
|
|
385
|
+
- 事件 `zoomStart` → `update:scale`、`handleLine` → `update:lines`
|
|
386
|
+
- 检测 `simple-panzoom`、`useLine` 等需手动移除的依赖并发出警告
|
|
118
387
|
|
|
119
|
-
|
|
388
|
+
> ⚠️ 脚本仅为辅助工具，执行后请务必 review 变更并运行测试。
|
|
120
389
|
|
|
121
|
-
|
|
390
|
+
### 新增能力速览
|
|
122
391
|
|
|
123
|
-
|
|
124
|
-
|
|
392
|
+
- **Minimap 缩略图**：独立组件，支持拖拽视口与点击跳转
|
|
393
|
+
- **插件系统**：通过 `plugins` 属性注入生命周期钩子
|
|
394
|
+
- **多画布管理器**：`CanvasManager` + `BUILTIN_TEMPLATES`
|
|
395
|
+
- **吸附引擎**：`snapThreshold` 配置参考线吸附阈值
|
|
396
|
+
- **动画引擎**：`enableAnimation` + `animationMode` 实现平滑缩放/平移
|
|
125
397
|
|
|
126
|
-
|
|
127
|
-
const normalized = normalizeWheel(e)
|
|
128
|
-
// normalized: { pixelX, pixelY, spinX, spinY }
|
|
398
|
+
---
|
|
129
399
|
|
|
130
|
-
|
|
131
|
-
engine.zoomBy(delta, e.clientX, e.clientY)
|
|
132
|
-
})
|
|
133
|
-
```
|
|
400
|
+
## 变更记录
|
|
134
401
|
|
|
135
|
-
|
|
402
|
+
- **v3.x** 内置 TransformEngine 替代外部 panzoom，新增 Minimap、插件系统、多画布管理器、吸附引擎、动画系统
|
|
403
|
+
- **v2.4.x** 多实例支持
|
|
404
|
+
- **v2.3.x** 引用简化版 simple-panzoom，提升性能，更新全部依赖
|
|
136
405
|
|
|
137
|
-
|
|
406
|
+
## 🌈 Who is using this?
|
|
138
407
|
|
|
139
|
-
|
|
140
|
-
import { MouseAdapter } from '@sketch-ruler/canvas'
|
|
141
|
-
import type { MouseAdapterCallbacks } from '@sketch-ruler/canvas'
|
|
142
|
-
|
|
143
|
-
const adapter = new MouseAdapter(parentElement, {
|
|
144
|
-
onWheel: (e, normalized) => {
|
|
145
|
-
// 自定义滚轮处理
|
|
146
|
-
},
|
|
147
|
-
onMouseDown: (e) => {
|
|
148
|
-
// 自定义鼠标按下
|
|
149
|
-
},
|
|
150
|
-
onMouseMove: (e) => {
|
|
151
|
-
// 自定义鼠标移动
|
|
152
|
-
},
|
|
153
|
-
onMouseUp: (e) => {
|
|
154
|
-
// 自定义鼠标抬起
|
|
155
|
-
},
|
|
156
|
-
onMouseEnter: () => {},
|
|
157
|
-
onMouseLeave: () => {}
|
|
158
|
-
} as MouseAdapterCallbacks)
|
|
159
|
-
|
|
160
|
-
adapter.bind()
|
|
161
|
-
// adapter.unbind()
|
|
162
|
-
```
|
|
408
|
+
[avue大屏可视化工具](https://data.avuejs.com/build/1) 
|
|
163
409
|
|
|
164
|
-
|
|
165
|
-
import { KeyboardAdapter } from '@sketch-ruler/canvas'
|
|
166
|
-
import type { KeyCombo } from '@sketch-ruler/canvas'
|
|
410
|
+
[GoView 高效拖拽式低代码数据可视化开发平台](https://vue.mtruning.club/#/project/items)
|
|
167
411
|
|
|
168
|
-
|
|
169
|
-
onShortcut: (combo: KeyCombo, e: KeyboardEvent) => {
|
|
170
|
-
// combo: 'ctrl+0' | 'ctrl+plus' | 'ctrl+minus' | 'space' | ...
|
|
171
|
-
console.log('shortcut', combo)
|
|
172
|
-
}
|
|
173
|
-
})
|
|
412
|
+
> open a PR to add your library ;)
|
|
174
413
|
|
|
175
|
-
|
|
176
|
-
// kb.unbind()
|
|
177
|
-
```
|
|
414
|
+
### QQ 技术交流群：
|
|
178
415
|
|
|
179
|
-
|
|
416
|
+
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=oqnBX-qn7gkWsdfYQdvNCzYbkeNknuOc&jump_from=webapi&authKey=4YXd2jvmWYU0cN8zUky5DoCD6kz+fjUyWv782GLUjDEIHctXYviSXD/pbqxm/ZDD"><img border="0" src="https://github.com/kakajun/vue3-sketch-ruler/blob/master/packages/docs/src/assets/group.png" alt="vue3-sketch-ruler" title="点击这里加入QQ群640166628"></a>
|
|
180
417
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
| `MouseAdapter` | 类 | 鼠标事件封装（wheel/mousedown/mousemove/mouseup） |
|
|
185
|
-
| `KeyboardAdapter` | 类 | 键盘快捷键封装 |
|
|
186
|
-
| `normalizeWheel` | 函数 | 滚轮事件标准化 |
|
|
187
|
-
| `getZoomDelta` | 函数 | 从标准化滚轮计算缩放增量 |
|
|
188
|
-
| `Canvas2DRenderer` | 类 | Canvas 2D 标尺渲染器 |
|
|
189
|
-
| `OffscreenRulerCache` | 类 | 离屏标尺缓存 |
|
|
190
|
-
| `LabelCache` | 类 | 刻度标签缓存 |
|
|
418
|
+
<div align=center>
|
|
419
|
+
<img src="https://github.com/kakajun/vue3-sketch-ruler/blob/master/packages/docs/src/assets/qq.png" width="243" height="287">
|
|
420
|
+
</div>
|
|
191
421
|
|
|
192
|
-
##
|
|
422
|
+
## 贡献者
|
|
193
423
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
input.bind(canvasElement)
|
|
204
|
-
|
|
205
|
-
// 3. 监听状态并渲染
|
|
206
|
-
engine.onUpdate((state) => {
|
|
207
|
-
// 更新 DOM transform
|
|
208
|
-
content.style.transform = `matrix(${state.scale}, 0, 0, ${state.scale}, ${state.x}, ${state.y})`
|
|
209
|
-
|
|
210
|
-
// 渲染标尺
|
|
211
|
-
const marks = computeScaleMarks({
|
|
212
|
-
scale: state.scale,
|
|
213
|
-
offset: state.x,
|
|
214
|
-
length: 1400,
|
|
215
|
-
thick: 20,
|
|
216
|
-
config: getTickConfig(state.scale)
|
|
217
|
-
})
|
|
218
|
-
renderer.render({ width: 1400, height: 20, scale: state.scale, offset: state.x, marks })
|
|
219
|
-
})
|
|
220
|
-
```
|
|
424
|
+
<a href="https://github.com/kakajun/vue3-sketch-ruler/graphs/contributors">
|
|
425
|
+
<img src="https://contrib.rocks/image?repo=kakajun/vue3-sketch-ruler" />
|
|
426
|
+
</a>
|
|
427
|
+
|
|
428
|
+
## 最后
|
|
429
|
+
|
|
430
|
+
这是个开源业余做的功能，欢迎加强该插件的小伙伴加入。如果 `vue3-sketch-ruler` 对您有帮助，请给个 star，您的鼓励是我最大的动力。
|
|
431
|
+
|
|
432
|
+
<a href='https://gitee.com/majun2232/vue3-sketch-Ruler'><img src='https://gitee.com/majun2232/vue3-sketch-Ruler/widgets/widget_4.svg' alt='Fork me on Gitee'></img></a>
|
|
221
433
|
|
|
222
|
-
##
|
|
434
|
+
## 引用
|
|
223
435
|
|
|
224
|
-
|
|
436
|
+
vue标尺组件 [vue-sketch-ruler](https://github.com/chuxiaoguo/vue-sketch-ruler.git)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sketch-ruler/canvas",
|
|
3
|
-
"version": "3.0.0
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Canvas rendering and DOM input management for sketch-ruler. Framework-agnostic, depends on Canvas 2D API and DOM Events.",
|
|
6
6
|
"keywords": [
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@sketch-ruler/core": "
|
|
47
|
+
"@sketch-ruler/core": "3.0.0"
|
|
48
48
|
},
|
|
49
49
|
"scripts": {
|
|
50
50
|
"build": "vite build",
|