From fbdc997d8a1bda40c6f8b7cfdc0b5c0e774f2d73 Mon Sep 17 00:00:00 2001
From: wuchenguang1998 <63847336+wuchenguang1998@users.noreply.github.com>
Date: Sun, 28 Jul 2024 23:28:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=9F=A9=E5=BD=A2=E5=9C=86=E8=A7=92?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E6=8B=96=E6=8B=BD=E6=94=BE=E7=BC=A9=20(#499)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/ServersPlugin.ts      |  1 +
 packages/core/index.ts              |  3 ++-
 packages/core/objects/CustomRect.js | 28 ++++++++++++++++++++++++++++
 src/components/attributeRounded.vue | 15 +++++++--------
 4 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 packages/core/objects/CustomRect.js

diff --git a/packages/core/ServersPlugin.ts b/packages/core/ServersPlugin.ts
index d1f81255..22abdd6f 100644
--- a/packages/core/ServersPlugin.ts
+++ b/packages/core/ServersPlugin.ts
@@ -178,6 +178,7 @@ class ServersPlugin {
       'extensionType',
       'extension',
       'verticalAlign',
+      'roundValue',
     ];
   }
 
diff --git a/packages/core/index.ts b/packages/core/index.ts
index 56d902b0..b71cc0b6 100644
--- a/packages/core/index.ts
+++ b/packages/core/index.ts
@@ -41,6 +41,7 @@ export { default as LockPlugin } from './plugin/LockPlugin';
 export { default as AddBaseTypePlugin } from './plugin/AddBaseTypePlugin';
 import EventType from './eventType';
 import Utils from './utils/utils';
+import CustomRect from './objects/CustomRect';
 
-export { EventType, Utils };
+export { EventType, Utils, CustomRect };
 export default Editor;
diff --git a/packages/core/objects/CustomRect.js b/packages/core/objects/CustomRect.js
new file mode 100644
index 00000000..71303ffc
--- /dev/null
+++ b/packages/core/objects/CustomRect.js
@@ -0,0 +1,28 @@
+/*
+ * @Author: wuchenguang1998
+ * @Date: 2024-07-28 22:00:00
+ * @LastEditors: wuchenguang1998
+ * @LastEditTime: 2024-07-28 23:00:00
+ * @Description: 矩形元素，圆角属性适配元素放缩影响
+ */
+import { fabric } from 'fabric';
+
+fabric.Rect = fabric.util.createClass(fabric.Rect, {
+  type: 'rect',
+  initialize: function (options) {
+    options || (options = {});
+    this.callSuper('initialize', options);
+  },
+  _render(ctx) {
+    const roundValue = this.roundValue || 0;
+    this.rx = (1 / this.scaleX) * roundValue;
+    this.ry = (1 / this.scaleY) * roundValue;
+    this.callSuper('_render', ctx);
+  },
+});
+
+fabric.Rect.fromObject = function (object, callback) {
+  return fabric.Object._fromObject('Rect', object, callback);
+};
+
+export default fabric.Rect;
diff --git a/src/components/attributeRounded.vue b/src/components/attributeRounded.vue
index c75364ae..6be34405 100644
--- a/src/components/attributeRounded.vue
+++ b/src/components/attributeRounded.vue
@@ -19,7 +19,7 @@
           <Form :label-width="40" class="form-wrap">
             <FormItem :label="$t('attributes.rx_ry')">
               <Slider
-                v-model="baseAttr.rx"
+                v-model="baseAttr.roundValue"
                 :max="300"
                 @on-input="(value) => changeCommon(value)"
               ></Slider>
@@ -28,9 +28,9 @@
         </Col>
         <Col :span="6" flex="1">
           <InputNumber
-            v-model="baseAttr.rx"
-            min="0"
-            max="300"
+            v-model="baseAttr.roundValue"
+            :min="0"
+            :max="300"
             @on-change="(value) => changeCommon(value)"
           ></InputNumber>
         </Col>
@@ -51,8 +51,7 @@ const rectType = ['rect'];
 
 // 属性值
 const baseAttr = reactive({
-  rx: 0,
-  ry: 0,
+  roundValue: 0,
 });
 
 // 属性获取
@@ -61,8 +60,7 @@ const getObjectAttr = (e) => {
   // 不是当前obj，跳过
   if (e && e.target && e.target !== activeObject) return;
   if (activeObject) {
-    baseAttr.rx = activeObject.get('rx');
-    baseAttr.ry = activeObject.get('ry');
+    baseAttr.roundValue = activeObject.get('roundValue');
   }
 };
 
@@ -72,6 +70,7 @@ const changeCommon = (value) => {
   if (activeObject) {
     activeObject.set('ry', value);
     activeObject.set('rx', value);
+    activeObject.set('roundValue', value);
     canvasEditor.canvas.renderAll();
   }
 };