@sketch-ruler/core 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 +376 -170
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,230 +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/core
|
|
9
|
-
# 或
|
|
10
|
-
pnpm add @sketch-ruler/core
|
|
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 { TransformEngine } from '@sketch-ruler/core'
|
|
25
|
+
## 🦄 Demo
|
|
21
26
|
|
|
22
|
-
|
|
23
|
-
{ x: 0, y: 0, scale: 1 }, // 初始状态
|
|
24
|
-
{ minZoom: 0.1, maxZoom: 10, enableAnimation: true, animationMode: 'ease-out' }
|
|
25
|
-
)
|
|
27
|
+
案例浏览: [https://kakajun.github.io/vue3-sketch-ruler](https://kakajun.github.io/vue3-sketch-ruler) 
|
|
26
28
|
|
|
27
|
-
|
|
28
|
-
const unsubscribe = engine.onUpdate((state) => {
|
|
29
|
-
console.log('scale', state.scale, 'offset', state.x, state.y)
|
|
30
|
-
})
|
|
29
|
+
[CodePen 示例](https://codepen.io/kakajun/pen/eYwagJb)
|
|
31
30
|
|
|
32
|
-
|
|
33
|
-
engine.zoomBy(0.5, 400, 300)
|
|
34
|
-
|
|
35
|
-
// 缩放到指定比例
|
|
36
|
-
engine.zoomTo(2, 400, 300)
|
|
37
|
-
|
|
38
|
-
// 平移
|
|
39
|
-
engine.panBy(100, -50)
|
|
31
|
+
## 安装
|
|
40
32
|
|
|
41
|
-
|
|
42
|
-
|
|
33
|
+
```bash
|
|
34
|
+
npm install --save vue3-sketch-ruler
|
|
43
35
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
const screen = engine.toScreenPoint(50, 50) // 世界 → 屏幕
|
|
36
|
+
# 或
|
|
37
|
+
yarn add vue3-sketch-ruler
|
|
47
38
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
engine.destroy()
|
|
39
|
+
# 或
|
|
40
|
+
pnpm add vue3-sketch-ruler
|
|
51
41
|
```
|
|
52
42
|
|
|
53
|
-
|
|
43
|
+
## 引入方式
|
|
54
44
|
|
|
55
|
-
|
|
45
|
+
### ESM
|
|
56
46
|
|
|
57
47
|
```ts
|
|
58
|
-
import {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
{ name: '详情页', width: 375, height: 812 }
|
|
63
|
-
])
|
|
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
|
+
```
|
|
64
52
|
|
|
65
|
-
|
|
66
|
-
manager.onUpdate((state) => {
|
|
67
|
-
console.log('当前画布:', state.activeId, '总数:', state.canvases.length)
|
|
68
|
-
})
|
|
53
|
+
### CDN
|
|
69
54
|
|
|
70
|
-
|
|
71
|
-
|
|
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" />
|
|
72
58
|
|
|
73
|
-
|
|
74
|
-
|
|
59
|
+
<script>
|
|
60
|
+
const { SketchRuler, Minimap } = window.Vue3SketchRuler
|
|
61
|
+
</script>
|
|
62
|
+
```
|
|
75
63
|
|
|
76
|
-
|
|
77
|
-
|
|
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({
|
|
117
|
+
scale: 1,
|
|
118
|
+
thick: 20,
|
|
119
|
+
isShowReferLine: true,
|
|
120
|
+
lines: { h: [0, 250], v: [0, 500] }
|
|
121
|
+
})
|
|
78
122
|
|
|
79
|
-
|
|
80
|
-
|
|
123
|
+
const canvasStyle = {
|
|
124
|
+
width: canvasWidth + 'px',
|
|
125
|
+
height: canvasHeight + 'px'
|
|
126
|
+
}
|
|
81
127
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
if (canvas) {
|
|
85
|
-
const lines = exportLines(canvas.lines) // => { h: number[], v: number[] }
|
|
128
|
+
const handleZoomChange = (detail: { scale: number; x: number; y: number }) => {
|
|
129
|
+
console.log('zoomchange', detail)
|
|
86
130
|
}
|
|
87
131
|
|
|
88
|
-
|
|
89
|
-
|
|
132
|
+
const handleLinesChange = (lines: { h: number[]; v: number[] }) => {
|
|
133
|
+
console.log('lines changed', lines)
|
|
134
|
+
}
|
|
135
|
+
</script>
|
|
90
136
|
```
|
|
91
137
|
|
|
92
|
-
###
|
|
93
|
-
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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
|
|
108
169
|
}
|
|
109
170
|
|
|
110
|
-
|
|
171
|
+
const handleNavigate = (x, y) => {
|
|
172
|
+
sketchRef.value?.setTransform({ x, y })
|
|
173
|
+
}
|
|
174
|
+
</script>
|
|
111
175
|
```
|
|
112
176
|
|
|
113
|
-
###
|
|
177
|
+
### 插件系统
|
|
114
178
|
|
|
115
179
|
```ts
|
|
116
|
-
import {
|
|
180
|
+
import type { SketchRulerPlugin } from 'vue3-sketch-ruler'
|
|
181
|
+
|
|
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
|
+
```
|
|
117
190
|
|
|
118
|
-
|
|
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
|
+
```
|
|
119
341
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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>
|
|
371
|
+
```
|
|
128
372
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
373
|
+
### 自动化迁移脚本
|
|
374
|
+
|
|
375
|
+
项目提供了官方迁移脚本，可自动处理大部分替换：
|
|
376
|
+
|
|
377
|
+
```bash
|
|
378
|
+
npx vue3-sketch-ruler-migrate <path>
|
|
132
379
|
```
|
|
133
380
|
|
|
134
|
-
|
|
381
|
+
脚本会自动处理：
|
|
135
382
|
|
|
136
|
-
|
|
137
|
-
|
|
383
|
+
- 组件名 `SketchRule` → `SketchRuler`
|
|
384
|
+
- 插槽 `#btn` → `#toolbar`
|
|
385
|
+
- 事件 `zoomStart` → `update:scale`、`handleLine` → `update:lines`
|
|
386
|
+
- 检测 `simple-panzoom`、`useLine` 等需手动移除的依赖并发出警告
|
|
138
387
|
|
|
139
|
-
|
|
140
|
-
contentWidth: 1920,
|
|
141
|
-
contentHeight: 1080,
|
|
142
|
-
viewportWidth: 1470,
|
|
143
|
-
viewportHeight: 700
|
|
144
|
-
})
|
|
388
|
+
> ⚠️ 脚本仅为辅助工具，执行后请务必 review 变更并运行测试。
|
|
145
389
|
|
|
146
|
-
|
|
147
|
-
engine.updateViewport({ x: 100, y: 50, scale: 0.5 })
|
|
390
|
+
### 新增能力速览
|
|
148
391
|
|
|
149
|
-
|
|
150
|
-
|
|
392
|
+
- **Minimap 缩略图**：独立组件，支持拖拽视口与点击跳转
|
|
393
|
+
- **插件系统**：通过 `plugins` 属性注入生命周期钩子
|
|
394
|
+
- **多画布管理器**：`CanvasManager` + `BUILTIN_TEMPLATES`
|
|
395
|
+
- **吸附引擎**：`snapThreshold` 配置参考线吸附阈值
|
|
396
|
+
- **动画引擎**：`enableAnimation` + `animationMode` 实现平滑缩放/平移
|
|
151
397
|
|
|
152
|
-
|
|
153
|
-
const session = engine.startDrag(50, 50)
|
|
154
|
-
const newPos = session.move(60, 60)
|
|
155
|
-
engine.endDrag()
|
|
156
|
-
```
|
|
398
|
+
---
|
|
157
399
|
|
|
158
|
-
|
|
400
|
+
## 变更记录
|
|
159
401
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
402
|
+
- **v3.x** 内置 TransformEngine 替代外部 panzoom，新增 Minimap、插件系统、多画布管理器、吸附引擎、动画系统
|
|
403
|
+
- **v2.4.x** 多实例支持
|
|
404
|
+
- **v2.3.x** 引用简化版 simple-panzoom，提升性能，更新全部依赖
|
|
163
405
|
|
|
164
|
-
|
|
165
|
-
const guideLines: GuideLine[] = importLines({ h: [0, 250], v: [0, 500] })
|
|
406
|
+
## 🌈 Who is using this?
|
|
166
407
|
|
|
167
|
-
|
|
168
|
-
const lines = exportLines(guideLines) // { h: [0, 250], v: [0, 500] }
|
|
408
|
+
[avue大屏可视化工具](https://data.avuejs.com/build/1) 
|
|
169
409
|
|
|
170
|
-
|
|
171
|
-
const style = computeLineStyle(guideLines[0], 1, 0, false, '#51d6a9')
|
|
172
|
-
```
|
|
410
|
+
[GoView 高效拖拽式低代码数据可视化开发平台](https://vue.mtruning.club/#/project/items)
|
|
173
411
|
|
|
174
|
-
|
|
412
|
+
> open a PR to add your library ;)
|
|
175
413
|
|
|
176
|
-
|
|
177
|
-
import {
|
|
178
|
-
createMatrix, fromTransform, multiply, invert, toCSSString,
|
|
179
|
-
toWorldPoint, toScreenPoint, fitRect
|
|
180
|
-
} from '@sketch-ruler/core'
|
|
414
|
+
### QQ 技术交流群：
|
|
181
415
|
|
|
182
|
-
|
|
183
|
-
const matrix = fromTransform(1.5, 100, 50)
|
|
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>
|
|
184
417
|
|
|
185
|
-
|
|
186
|
-
|
|
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>
|
|
187
421
|
|
|
188
|
-
|
|
189
|
-
const world = toWorldPoint(matrix, 200, 200)
|
|
422
|
+
## 贡献者
|
|
190
423
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
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>
|
|
194
427
|
|
|
195
|
-
|
|
428
|
+
## 最后
|
|
196
429
|
|
|
197
|
-
|
|
198
|
-
import { computeScaleMarks, getTickConfig, applyHysteresis } from '@sketch-ruler/core'
|
|
430
|
+
这是个开源业余做的功能，欢迎加强该插件的小伙伴加入。如果 `vue3-sketch-ruler` 对您有帮助，请给个 star，您的鼓励是我最大的动力。
|
|
199
431
|
|
|
200
|
-
|
|
201
|
-
scale: 1,
|
|
202
|
-
offset: 0,
|
|
203
|
-
length: 800,
|
|
204
|
-
thick: 20,
|
|
205
|
-
config: getTickConfig(1)
|
|
206
|
-
})
|
|
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>
|
|
207
433
|
|
|
208
|
-
|
|
209
|
-
const stableConfig = applyHysteresis(0.85, getTickConfig(0.8), getTickConfig(1))
|
|
210
|
-
```
|
|
434
|
+
## 引用
|
|
211
435
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
| 模块 | 导出 | 说明 |
|
|
215
|
-
|------|------|------|
|
|
216
|
-
| `TransformEngine` | 类 | 2D 仿射变换引擎，支持动画 |
|
|
217
|
-
| `CanvasManager` | 类 | 多画布生命周期管理 |
|
|
218
|
-
| `BUILTIN_TEMPLATES` | 常量 | 内置画布模板（A4、Web 1920、Mobile 等） |
|
|
219
|
-
| `PluginManager` | 类 | 插件注册与生命周期调度 |
|
|
220
|
-
| `SnapEngine` | 类 | 参考线吸附计算 |
|
|
221
|
-
| `MinimapEngine` | 类 | 缩略图视口映射与拖拽 |
|
|
222
|
-
| `LineManager` | 类 | 参考线增删改查 |
|
|
223
|
-
| `importLines` / `exportLines` | 函数 | 参考线格式转换 |
|
|
224
|
-
| `computeLineStyle` | 函数 | 参考线 DOM 样式计算 |
|
|
225
|
-
| `computeScaleMarks` | 函数 | 刻度标记计算 |
|
|
226
|
-
| `fromTransform` / `toWorldPoint` / `toScreenPoint` | 函数 | 矩阵与坐标转换 |
|
|
227
|
-
|
|
228
|
-
## License
|
|
229
|
-
|
|
230
|
-
MIT
|
|
436
|
+
vue标尺组件 [vue-sketch-ruler](https://github.com/chuxiaoguo/vue-sketch-ruler.git)
|
package/package.json
CHANGED