refactor(画布缩放): 替换为Fit自带函数

ikuaitu · May 7, 2024 · 4d1d18b · 4d1d18b
1 parent 6444ad9
commit 4d1d18b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git a/.env.development b/.env.development
@@ -1,2 +1,2 @@
 APP_FLAG=dev
-APP_APIHOST=http://localhost:1337
+# APP_APIHOST=http://localhost:1337
diff --git a/packages/core/plugin/WorkspacePlugin.ts b/packages/core/plugin/WorkspacePlugin.ts
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2023-06-27 12:26:41
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-04-10 17:33:58
+ * @LastEditTime: 2024-05-07 16:28:40
  * @Description: 画布区域插件
  */
 
@@ -16,10 +16,11 @@ class WorkspacePlugin {
   public editor: IEditor;
   static pluginName = 'WorkspacePlugin';
   static events = ['sizeChange'];
-  static apis = ['big', 'small', 'auto', 'one', 'setSize'];
+  static apis = ['big', 'small', 'auto', 'one', 'setSize', 'getWorkspase'];
   workspaceEl!: HTMLElement;
   workspace: null | fabric.Rect;
   option: any;
+  zoomRatio: number;
   constructor(canvas: fabric.Canvas, editor: IEditor) {
     this.canvas = canvas;
     this.editor = editor;
@@ -28,6 +29,7 @@ class WorkspacePlugin {
       width: 900,
       height: 2000,
     });
+    this.zoomRatio = 0.85;
   }
 
   init(option: { width: number; height: number }) {
@@ -94,6 +96,11 @@ class WorkspacePlugin {
     this.auto();
   }
 
+  // 返回workspace对象
+  getWorkspase() {
+    return this.canvas.getObjects().find((item) => item.id === 'workspace') as fabric.Rect;
+  }
+
   /**
    * 设置画布中心到指定对象中心点上
    * @param {Object} obj 指定的对象
@@ -154,13 +161,10 @@ class WorkspacePlugin {
   }
 
   _getScale() {
-    const viewPortWidth = this.workspaceEl.offsetWidth;
-    const viewPortHeight = this.workspaceEl.offsetHeight;
-    // 按照宽度
-    if (viewPortWidth / viewPortHeight < this.option.width / this.option.height) {
-      return viewPortWidth / this.option.width;
-    } // 按照宽度缩放
-    return viewPortHeight / this.option.height;
+    return fabric.util.findScaleToFit(this.getWorkspase(), {
+      width: this.workspaceEl.offsetWidth,
+      height: this.workspaceEl.offsetHeight,
+    });
   }
 
   // 放大
@@ -185,12 +189,12 @@ class WorkspacePlugin {
   // 自动缩放
   auto() {
     const scale = this._getScale();
-    this.setZoomAuto(scale - 0.08);
+    this.setZoomAuto(scale * this.zoomRatio);
   }
 
   // 1:1 放大
   one() {
-    this.setZoomAuto(0.8 - 0.08);
+    this.setZoomAuto(1 * this.zoomRatio);
     this.canvas.requestRenderAll();
   }
 

diff --git a/src/components/layer.vue b/src/components/layer.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: 秦少卫
  * @Date: 2022-09-03 19:16:55
- * @LastEditors: June
- * @LastEditTime: 2024-01-31 12:43:22
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-05-07 16:17:08
  * @Description: 图层面板
 -->
 
@@ -147,8 +147,6 @@ const getList = () => {
 };
 
 onMounted(() => {
-  // 当选择画布中的对象时，该对象不出现在顶层。
-  canvasEditor.canvas.preserveObjectStacking = true;
   canvasEditor.canvas.on('after:render', getList);
 });
 </script>

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
@@ -222,6 +222,7 @@ onMounted(() => {
     stopContextMenu: true, // 禁止默认右键菜单
     controlsAboveOverlay: true, // 超出clipPath后仍然展示控制条
     imageSmoothingEnabled: false, // 解决文字导出后不清晰问题
+    preserveObjectStacking: true, // 当选择画布中的对象时，让对象不在顶层。
   });
 
   // 初始化编辑器