From 0a2cc37f8145223569397b2ffd0e127941c39acb Mon Sep 17 00:00:00 2001 From: zxc <1171051090@qq.com> Date: Tue, 11 Jun 2024 22:41:37 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=94=BB=E5=B8=83=E7=BC=A9=E6=94=BE?= =?UTF-8?q?=E5=90=8E=E5=AE=9A=E4=BD=8D=E5=BC=82=E5=B8=B8=EF=BC=88#275?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Editor/Canvas/hooks/useViewportSize.ts | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/views/Editor/Canvas/hooks/useViewportSize.ts b/src/views/Editor/Canvas/hooks/useViewportSize.ts index 51a38836..eac80fe9 100644 --- a/src/views/Editor/Canvas/hooks/useViewportSize.ts +++ b/src/views/Editor/Canvas/hooks/useViewportSize.ts @@ -37,19 +37,28 @@ export default (canvasRef: Ref) => { const canvasWidth = canvasRef.value.clientWidth const canvasHeight = canvasRef.value.clientHeight - const newViewportActualWidth = canvasWidth * (newValue / 100) - const oldViewportActualWidth = canvasWidth * (oldValue / 100) - const newViewportActualHeight = canvasHeight * (newValue / 100) - const oldViewportActualHeight = canvasHeight * (oldValue / 100) + if (canvasHeight / canvasWidth > viewportRatio.value) { + const newViewportActualWidth = canvasWidth * (newValue / 100) + const oldViewportActualWidth = canvasWidth * (oldValue / 100) + const newViewportActualHeight = newViewportActualWidth * viewportRatio.value + const oldViewportActualHeight = oldViewportActualWidth * viewportRatio.value - if (canvasHeight / canvasWidth > viewportRatio.value) { mainStore.setCanvasScale(newViewportActualWidth / VIEWPORT_SIZE) + + viewportLeft.value = viewportLeft.value - (newViewportActualWidth - oldViewportActualWidth) / 2 + viewportTop.value = viewportTop.value - (newViewportActualHeight - oldViewportActualHeight) / 2 } else { + const newViewportActualHeight = canvasHeight * (newValue / 100) + const oldViewportActualHeight = canvasHeight * (oldValue / 100) + const newViewportActualWidth = newViewportActualHeight / viewportRatio.value + const oldViewportActualWidth = oldViewportActualHeight / viewportRatio.value + mainStore.setCanvasScale(newViewportActualHeight / (VIEWPORT_SIZE * viewportRatio.value)) + + viewportLeft.value = viewportLeft.value - (newViewportActualWidth - oldViewportActualWidth) / 2 + viewportTop.value = viewportTop.value - (newViewportActualHeight - oldViewportActualHeight) / 2 } - viewportLeft.value = viewportLeft.value - (newViewportActualWidth - oldViewportActualWidth) / 2 - viewportTop.value = viewportTop.value - (newViewportActualHeight - oldViewportActualHeight) / 2 } // 可视区域缩放或比例变化时，重置/更新可视区域的位置