chiyi/image2api
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(canvas): 默认缩放改为 60%,新增 zoomTo 缩放接口

Browse Source
This commit is contained in:
chiyi
2026-10-12 14:22:29 +08:00
parent 655531eaca
commit 5dc334062e
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/utils/canvas.js
+2 -1
View File
@@ -17,6 +17,7 @@ export function screenToWorld(sx, sy, vp) {
export const MIN_SCALE = 0.05 export const MIN_SCALE = 0.05
export const MAX_SCALE = 4 export const MAX_SCALE = 4
export const DEFAULT_SCALE = 0.6 // 新画布/重置视图的默认缩放
/** 以屏幕点 m 为锚缩放到 newScale,返回新 viewport(平移量按锚点保持不动) */ /** 以屏幕点 m 为锚缩放到 newScale,返回新 viewport(平移量按锚点保持不动) */
export function zoomAt(vp, mx, my, newScale) { export function zoomAt(vp, mx, my, newScale) {
@@ -78,7 +79,7 @@ export function newId(prefix) {
*/ */
export function normalizeDoc(raw) { export function normalizeDoc(raw) {
const doc = { const doc = {
viewport: { x: 0, y: 0, scale: 1 }, viewport: { x: 0, y: 0, scale: DEFAULT_SCALE },
nodes: [], nodes: [],
edges: [], edges: [],
} }
frontend/src/views/CanvasView.vue
+4 -4
View File
@@ -5,7 +5,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch }
import { onBeforeRouteLeave } from 'vue-router' import { onBeforeRouteLeave } from 'vue-router'
import { api, generatedUrl, jsonBody, thumbUrl } from '../api' import { api, generatedUrl, jsonBody, thumbUrl } from '../api'
import { auth } from '../auth' import { auth } from '../auth'
import { normalizeDoc, newId, ratioToSize, serializeDoc, screenToWorld } from '../utils/canvas' import { normalizeDoc, newId, ratioToSize, serializeDoc, screenToWorld, DEFAULT_SCALE } from '../utils/canvas'
import CanvasStage from '../components/canvas/CanvasStage.vue' import CanvasStage from '../components/canvas/CanvasStage.vue'
import SelectMenu from '../components/SelectMenu.vue' import SelectMenu from '../components/SelectMenu.vue'
@@ -15,7 +15,7 @@ const stage = ref(null)
const canvases = ref([]) const canvases = ref([])
const currentId = ref('') const currentId = ref('')
const title = ref('未命名画布') const title = ref('未命名画布')
const doc = reactive({ viewport: { x: 0, y: 0, scale: 1 }, nodes: [], edges: [] }) const doc = reactive({ viewport: { x: 0, y: 0, scale: DEFAULT_SCALE }, nodes: [], edges: [] })
const loading = ref(true) const loading = ref(true)
const loadError = ref('') const loadError = ref('')
const saveState = ref('saved') // saved | dirty | saving | error const saveState = ref('saved') // saved | dirty | saving | error
@@ -752,7 +752,7 @@ function onKeydown(e) {
} else if (e.key === '-') { } else if (e.key === '-') {
stage.value?.zoomStep(-1) stage.value?.zoomStep(-1)
} else if (e.key === '0') { } else if (e.key === '0') {
stage.value?.setViewport({ x: 0, y: 0, scale: 1 }) stage.value?.setViewport({ x: 0, y: 0, scale: DEFAULT_SCALE })
} else if (e.key === '1') { } else if (e.key === '1') {
stage.value?.fitToContent?.() stage.value?.fitToContent?.()
} }
@@ -836,7 +836,7 @@ const saveLabel = computed(() => ({
@update:model-value="(p) => stage?.zoomTo(p / 100)" @update:model-value="(p) => stage?.zoomTo(p / 100)"
/> />
<button class="cv-btn" title="放大 10%" @click="stage?.zoomStep(1)">＋</button> <button class="cv-btn" title="放大 10%" @click="stage?.zoomStep(1)">＋</button>
<button class="cv-btn" title="重置视图 (0)" @click="stage?.setViewport({ x: 0, y: 0, scale: 1 })">⌂</button> <button class="cv-btn" title="重置视图 (0)" @click="stage?.setViewport({ x: 0, y: 0, scale: DEFAULT_SCALE })">⌂</button>
<button class="cv-btn" title="适应内容 (1)" @click="stage?.fitToContent?.()">⤢</button> <button class="cv-btn" title="适应内容 (1)" @click="stage?.fitToContent?.()">⤢</button>
<span class="cv-sep" /> <span class="cv-sep" />
<button class="cv-btn cv-btn--accent" @click="addNote">＋ 笔记</button> <button class="cv-btn cv-btn--accent" @click="addNote">＋ 笔记</button>