画布拖拽的方法提出来

src/components/mt-preview-ypt/index.vue

@@ -2,10 +2,15 @@
     <div
         style="overflow: hidden; display: flex; flex-direction: column; height: 100vh"
         v-loading="useData.loading"
-        element-loading-background="#343849c7"
         :style="{ backgroundColor: useData.display ? '' : canvas_cfg.color }"
+        :class="`canvasArea ${isDragging ? 'cursor-grabbing' : mtPreviewProps.canDrag ? 'cursor-grab' : ''} `"
+        @mousedown="onMouseDown"
+        @mousemove="onMouseMove"
+        @mouseup="onMouseUp"
+        @mouseleave="onMouseUp"
+        @wheel="onMouseWheel"
     >
-        <el-button type="primary" class="backBtn" @click="onBack" v-if="!useData.display">返回</el-button>
+        <!-- <el-button type="primary" class="backBtn" @click="onBack" v-if="!useData.display">返回</el-button> -->
         <!-- 缩放控制按钮 (默认注释，需要时可开启) -->
         <!-- <div class="zoom-controls">
             <el-button icon="ZoomIn" size="small" @click="zoomIn"></el-button>
@@ -14,17 +19,7 @@
         </div>
          -->
         <!-- <el-scrollbar ref="elScrollbarRef" class="w-1/1 h-1/1"  @scroll="onScroll" > -->
-        <div
+        <div ref="canvasAreaRef" :style="canvasStyle">
-            ref="canvasAreaRef"
-            :class="`canvasArea ${isDragging ? 'cursor-grabbing' : mtPreviewProps.canDrag ? 'cursor-grab' : ''} `"
-            style=""
-            @mousedown="onMouseDown"
-            @mousemove="onMouseMove"
-            @mouseup="onMouseUp"
-            @mouseleave="onMouseUp"
-            @wheel="onMouseWheel"
-            :style="canvasStyle"
-        >
             <render-core
                 v-model:done-json="done_json"
                 :canvas-cfg="canvas_cfg"
@@ -131,7 +126,7 @@ const canvas_cfg = ref({
     // height: 1080,
     width: globalStore.canvasCfg.width,
     height: globalStore.canvasCfg.height,
-    scale: 0.96,
+    scale: 1,
     color: '',
     img: '',
     guide: true,
@@ -277,9 +272,7 @@ const zoomOut = () => {
 // 重置变换
 const resetTransform = () => {
     // 定义重置变换的函数
-    canvas_cfg.value.scale = useData.display
+    canvas_cfg.value.scale = useData.display ? 1 : document.documentElement.clientHeight / globalStore.canvasCfg.height
-        ? 0.96
-        : document.documentElement.clientHeight / globalStore.canvasCfg.height
     canvas_cfg.value.pan = { x: 0, y: 0 }
     tempPan.x = 0
     tempPan.y = 0
@@ -1073,10 +1066,10 @@ watch(
     () => useData.display,
     newVal => {
         if (newVal) {
-            canvas_cfg.value.scale = 0.96
+            canvas_cfg.value.scale = 1
             canvas_cfg.value.pan = {
                 x: 0,
-                y: 50
+                y: 0
             }
         } else {
             canvas_cfg.value.scale = document.documentElement.clientHeight / globalStore.canvasCfg.height