fix: shape居中颜色NaN问题 (#401)

* fix: 解决默认文字颜色无法选中问题 * fix: 1. 解决原生shape.center()无法居中新增shape的问题 2. 修改颜色选择出现NaN的问题
ikuaitu · May 30, 2024 · b302126 · b302126
1 parent c6faf2b
commit b302126
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/packages/core/plugin/DrawPolygonPlugin.ts b/packages/core/plugin/DrawPolygonPlugin.ts
@@ -99,7 +99,7 @@ class DrawPolygonPlugin {
   }
   _createPolygon(points: fabric.Point[]) {
     return new fabric.Polygon(points, {
-      fill: '#ccc',
+      fill: '#ccccccff',
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       id: uuid(),

diff --git a/src/components/tools.vue b/src/components/tools.vue
@@ -251,10 +251,10 @@ const addText = (option) => {
     id: uuid(),
   });
   canvasEditor.canvas.add(text);
+  canvasEditor.canvas.setActiveObject(text);
   if (!option) {
-    text.center();
+    canvasEditor.position('center');
   }
-  canvasEditor.canvas.setActiveObject(text);
 };
 
 // const addImg = (e) => {
@@ -279,10 +279,10 @@ const addTextBox = (option) => {
     id: uuid(),
   });
   canvasEditor.canvas.add(text);
+  canvasEditor.canvas.setActiveObject(text);
   if (!option) {
-    text.center();
+    canvasEditor.position('center');
   }
-  canvasEditor.canvas.setActiveObject(text);
 };
 
 const addTriangle = (option) => {
@@ -291,22 +291,22 @@ const addTriangle = (option) => {
     ...option,
     width: 400,
     height: 400,
-    fill: '#92706B',
+    fill: '#92706BFF',
     id: uuid(),
     name: '三角形',
   });
   canvasEditor.canvas.add(triangle);
+  canvasEditor.canvas.setActiveObject(triangle);
   if (!option) {
-    triangle.center();
+    canvasEditor.position('center');
   }
-  canvasEditor.canvas.setActiveObject(triangle);
 };
 
 const addPolygon = (option) => {
   const polygon = new fabric.Polygon(getPolygonVertices(5, 200), {
     ...defaultPosition,
     ...option,
-    fill: '#ccc',
+    fill: '#CCCCCCFF',
     id: uuid(),
     name: '多边形',
   });
@@ -321,43 +321,44 @@ const addPolygon = (option) => {
     },
   });
   canvasEditor.canvas.add(polygon);
+  canvasEditor.canvas.setActiveObject(polygon);
   if (!option) {
-    polygon.center();
+    canvasEditor.position('center');
   }
-  canvasEditor.canvas.setActiveObject(polygon);
 };
 
 const addCircle = (option) => {
+  console.log(canvasEditor);
   const circle = new fabric.Circle({
     ...defaultPosition,
     ...option,
     radius: 150,
-    fill: '#57606B',
+    fill: '#57606BFF',
     id: uuid(),
     name: '圆形',
   });
   canvasEditor.canvas.add(circle);
+  canvasEditor.canvas.setActiveObject(circle);
   if (!option) {
-    circle.center();
+    canvasEditor.position('center');
   }
-  canvasEditor.canvas.setActiveObject(circle);
 };
 
 const addRect = (option) => {
   const rect = new fabric.Rect({
     ...defaultPosition,
     ...option,
-    fill: '#F57274',
+    fill: '#F57274FF',
     width: 400,
     height: 400,
     id: uuid(),
     name: '矩形',
   });
   canvasEditor.canvas.add(rect);
+  canvasEditor.canvas.setActiveObject(rect);
   if (!option) {
-    rect.center();
+    canvasEditor.position('center');
   }
-  canvasEditor.canvas.setActiveObject(rect);
 };
 const drawPolygon = () => {
   const onEnd = () => {