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 @@
@@ -28,9 +28,9 @@ @@ -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(); } };