fix(添加SVG元素): 元素自动适配画布大小

ikuaitu · Apr 11, 2024 · 215a07a · 215a07a
1 parent 39e6676
commit 215a07a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/packages/core/ServersPlugin.ts b/packages/core/ServersPlugin.ts
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2023-06-20 12:52:09
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-04-10 19:15:51
+ * @LastEditTime: 2024-04-11 12:53:54
  * @Description: 内部插件
  */
 import { v4 as uuid } from 'uuid';
@@ -126,17 +126,21 @@ class ServersPlugin {
    * @param {Event} event
    * @param {Object} item
    */
-  dragAddItem(event: DragEvent, item: fabric.Object) {
-    const { left, top } = this.canvas.getSelectionElement().getBoundingClientRect();
-    if (event.x < left || event.y < top || item.width === undefined) return;
-
-    const point = {
-      x: event.x - left,
-      y: event.y - top,
-    };
-    const pointerVpt = this.canvas.restorePointerVpt(point);
-    item.left = pointerVpt.x - item.width / 2;
-    item.top = pointerVpt.y;
+  dragAddItem(item: fabric.Object, event?: DragEvent) {
+    if (event) {
+      const { left, top } = this.canvas.getSelectionElement().getBoundingClientRect();
+      if (event.x < left || event.y < top || item.width === undefined) return;
+
+      const point = {
+        x: event.x - left,
+        y: event.y - top,
+      };
+      const pointerVpt = this.canvas.restorePointerVpt(point);
+      item.left = pointerVpt.x - item.width / 2;
+      item.top = pointerVpt.y;
+    }
+    const { width } = this._getSaveOption();
+    width && item.scaleToWidth(width / 2);
     this.canvas.add(item);
     this.canvas.requestRenderAll();
   }

diff --git a/src/components/importSvgEl.vue b/src/components/importSvgEl.vue
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2023-08-05 17:47:35
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-02-06 17:54:10
+ * @LastEditTime: 2024-04-11 12:52:53
  * @Description: file content
 -->
 
@@ -143,24 +143,23 @@ const dragItem = (event: Event) => {
       id: uuid(),
       name: 'svg元素',
     });
-    canvasEditor.dragAddItem(event, item);
+    canvasEditor.dragAddItem(item, event);
   });
 };
 
 // 按照类型渲染
 const addItem = (e: Event) => {
   const target = e.target as HTMLImageElement;
   const url = target.src;
-  fabric.loadSVGFromURL(url, (objects, options) => {
+  fabric.loadSVGFromURL(url, (objects) => {
     const item = fabric.util.groupSVGElements(objects, {
-      ...options,
       ...defaultPosition,
+      shadow: '',
+      fontFamily: 'arial',
       id: uuid(),
       name: 'svg元素',
     });
-    canvasEditor.canvas.add(item);
-    canvasEditor.canvas.setActiveObject(item);
-    canvasEditor.canvas.requestRenderAll();
+    canvasEditor.dragAddItem(item);
   });
 };
 </script>