fix(画布): 画布尺寸修改

ikuaitu · Feb 20, 2024 · 2596883 · 2596883
1 parent f192033
commit 2596883
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/src/components/setSize.vue b/src/components/setSize.vue
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2022-09-03 19:16:55
  * @LastEditors: 秦少卫
- * @LastEditTime: 2023-11-19 15:58:59
+ * @LastEditTime: 2024-02-20 13:11:30
  * @Description: 尺寸设置
 -->
 
@@ -100,9 +100,9 @@ let presetSize = reactive([
 
 onMounted(() => {
   canvasEditor.setSize(width.value, height.value);
-  canvasEditor.on('sizeChange', (width, height) => {
-    width.value = width;
-    height.value = height;
+  canvasEditor.on('sizeChange', (w, h) => {
+    width.value = w;
+    height.value = h;
   });
 
   // canvas.editor.editorWorkspace.setSize(width.value, height.value);

diff --git a/src/core/core.ts b/src/core/core.ts
@@ -5,7 +5,7 @@ import ServersPlugin from './ServersPlugin';
 import { AsyncSeriesHook } from 'tapable';
 
 class Editor extends EventEmitter {
-  canvas: fabric.Canvas | undefined;
+  canvas!: fabric.Canvas;
   contextMenu: any;
   private pluginMap: {
     [propName: string]: IPluginTempl;

diff --git a/src/core/plugin/WorkspacePlugin.ts b/src/core/plugin/WorkspacePlugin.ts
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2023-06-27 12:26:41
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-02-20 12:54:10
+ * @LastEditTime: 2024-02-20 13:04:10
  * @Description: 画布区域插件
  */
 
@@ -17,12 +17,13 @@ class WorkspacePlugin {
   static pluginName = 'WorkspacePlugin';
   static events = ['sizeChange'];
   static apis = ['big', 'small', 'auto', 'one', 'setSize'];
-  workspaceEl: HTMLElement;
+  workspaceEl!: HTMLElement;
   workspace: null | fabric.Rect;
   option: any;
   constructor(canvas: fabric.Canvas, editor: IEditor) {
     this.canvas = canvas;
     this.editor = editor;
+    this.workspace = null;
     this.init({
       width: 900,
       height: 2000,
@@ -115,7 +116,7 @@ class WorkspacePlugin {
     resizeObserver.observe(this.workspaceEl);
   }
 
-  setSize(width: number, height: number) {
+  setSize(width: number | undefined, height: number) {
     this._initBackground();
     this.option.width = width;
     this.option.height = height;

diff --git a/typings/extends.d.ts b/typings/extends.d.ts
@@ -2,6 +2,7 @@ declare namespace fabric {
   export interface Canvas {
     contextTop: CanvasRenderingContext2D;
     lowerCanvasEl: HTMLElement;
+    wrapperEl: HTMLElement;
     _currentTransform: unknown;
     _centerObject: (obj: fabric.Object, center: fabric.Point) => fabric.Canvas;
   }