fix: 矩形圆角适配拖拽放缩 (#499)

packages/core/ServersPlugin.ts

@@ -178,6 +178,7 @@ class ServersPlugin {
       'extensionType',
       'extension',
       'verticalAlign',
+      'roundValue',
     ];
   }
 

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;

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;

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();
   }
 };