瀏覽代碼

feat(picture-editor): 添加图片尺寸同步和文本框自适应功能

- 实现图片对象尺寸变化时同步到右侧面板
- 为图片对象添加缩放事件监听器以更新尺寸数据
- 添加syncObjectDataToPanel方法处理对象数据同步
- 修复文本框组件的autosize配置替代固定rows属性
- 在编辑层状态中添加文本内容的初始化和更新逻辑
panqiuyao 6 天之前
父節點
當前提交
db176554f8

+ 21 - 0
frontend/src/views/components/PictureEditor/mixin/actions/index.js

@@ -370,6 +370,23 @@ export default  {
       this.action = 'select'
       this.fcanvas.isDrawingMode = false
     },
+
+    // 同步对象数据到右侧面板
+    syncObjectDataToPanel(obj) {
+      if (!obj || !this.editLayer || obj.id !== this.editLayer.id) {
+        return;
+      }
+
+      // 同步图片尺寸
+      if (obj.type === 'image') {
+        if (this.imageSize) {
+          this.imageSize.width = Math.round(obj.getScaledWidth());
+          this.imageSize.height = Math.round(obj.getScaledHeight());
+          // 强制更新Vue组件以反映数据变化
+          this.$forceUpdate();
+        }
+      }
+    },
     async setCursor(){
       if(!['draw','erase'].includes(this.action))  return
       let fcanvasZoom =  this.fcanvas.getZoom()
@@ -754,6 +771,10 @@ export default  {
             left: e?.target?.left,
             top: e?.target?.top
           });
+
+          // 更新右侧面板数据同步
+          this.syncObjectDataToPanel(e.target);
+
           this.updateCanvasState();
         };
         this.undoEventHandlers.push({ event: eventName, handler });

+ 10 - 0
frontend/src/views/components/PictureEditor/mixin/edit/index.js

@@ -113,6 +113,7 @@ export default  {
         : 1
       this.layerState = {
         ...this.layerState,
+        text: this.editLayer?.text ?? '',
         fontSize: this.editLayer?.fontSize ?? 16,
         lineHeight: this.editLayer?.lineHeight ?? 1,
         charSpacing: this.editLayer?.charSpacing ?? 0,
@@ -184,6 +185,14 @@ export default  {
             this.createClipBackground();
           }
 
+          // 为图片对象添加尺寸变化监听
+          if (this.editLayer.type === 'image') {
+            // 移除之前可能的监听器
+            this.editLayer.off('scaling', this.updateImageSizeFromCanvas);
+            // 添加新的监听器
+            this.editLayer.on('scaling', this.updateImageSizeFromCanvas);
+          }
+
           // 同步描边图形(如果存在)
           if (this.editLayer.strokeObj) {
             this.fcanvas.add(markRaw(this.editLayer.strokeObj));
@@ -198,6 +207,7 @@ export default  {
         : 1
       this.layerState = {
         ...this.layerState,
+        text: this.editLayer?.text ?? '',
         fontSize: this.editLayer?.fontSize ?? 16,
         lineHeight: this.editLayer?.lineHeight ?? 1,
         charSpacing: this.editLayer?.charSpacing ?? 0,

+ 1 - 1
frontend/src/views/components/PictureEditor/mixin/edit/module/textbox.js

@@ -19,7 +19,7 @@ const textbox = () => {
               type="textarea"
               :model-value="editLayer.text"
               @input="(val) => setLayerAttr('text', val)"
-              :rows="3"
+             :autosize="{ minRows: 2, maxRows: 8}"
               placeholder="请输入文字内容"
               class="mar-top-5"
               resize="none"