feat: 裁剪组裁剪跟随选择组移动

src/component/Canvas/CanvasEditor/components/TextEditorPanel.vue

@@ -1,10 +1,6 @@
 <!-- filepath: /Users/aaron/work/pc/air/canvasEdit/src/components/CanvasEditor/components/TextEditorPanel.vue -->
 <template>
-  <div
-    v-if="visible"
-    class="text-editor-panel"
-    :class="{ 'is-active': visible }"
-  >
+  <div v-if="visible" class="text-editor-panel" :class="{ 'is-active': visible }">
     <div class="text-editor-panel-header">
       <div class="header-btn import-btn">编辑文本样式</div>
       <div class="header-actions">
@@ -185,10 +181,7 @@
           <div class="bg-header">字体色</div>
           <div class="bg-options">
             <div class="style-btn color-btn" @click="openColorPicker('text')">
-              <div
-                class="style-icon color-icon"
-                :style="{ backgroundColor: textColor }"
-              ></div>
+              <div class="style-icon color-icon" :style="{ backgroundColor: textColor }"></div>
             </div>
           </div>
         </div>
@@ -196,22 +189,15 @@
         <div class="background-controls">
           <div class="bg-header">背景色</div>
           <div class="bg-options">
-            <div
-              class="style-btn color-btn"
-              @click="openColorPicker('background')"
-            >
+            <div class="style-btn color-btn" @click="openColorPicker('background')">
               <div
                 class="style-icon color-icon"
                 :style="{
-                  backgroundColor: hasTransparentBg
-                    ? 'transparent'
-                    : backgroundColor,
+                  backgroundColor: hasTransparentBg ? 'transparent' : backgroundColor,
                   backgroundImage: hasTransparentBg
                     ? 'linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)'
                     : 'none',
-                  backgroundSize: hasTransparentBg
-                    ? '8px 8px, 8px 8px'
-                    : 'auto',
+                  backgroundSize: hasTransparentBg ? '8px 8px, 8px 8px' : 'auto',
                   backgroundPosition: hasTransparentBg ? '0 0, 4px 4px' : '0 0',
                 }"
               ></div>
@@ -232,18 +218,11 @@
     <div v-if="showColorPicker" class="color-picker-modal">
       <div class="color-picker-container">
         <div class="color-picker-header">
-          <span>{{
-            colorPickerMode === "text" ? "选择文字颜色" : "选择背景颜色"
-          }}</span>
+          <span>{{ colorPickerMode === "text" ? "选择文字颜色" : "选择背景颜色" }}</span>
           <div class="close-color-picker" @click="closeColorPicker">×</div>
         </div>
         <div class="color-picker-content">
-          <input
-            type="color"
-            v-model="currentColor"
-            @change="updateColor"
-            class="color-input"
-          />
+          <input type="color" v-model="currentColor" @change="updateColor" class="color-input" />
           <div class="color-presets">
             <div
               v-for="(color, index) in colorPresets"
@@ -253,9 +232,7 @@
               @click="selectPresetColor(color)"
             ></div>
           </div>
-          <div class="confirm-color-btn" @click="confirmColorSelection">
-            确定
-          </div>
+          <div class="confirm-color-btn" @click="confirmColorSelection">确定</div>
         </div>
       </div>
     </div>
@@ -316,7 +293,7 @@ export default {
     // 新增属性
     const charSpacingPercent = ref(0);
     const textSpacing = ref(0);
-    const baseline = ref(0);
+    // const baseline = ref(0);
     const showColorPicker = ref(false);
     const colorPickerMode = ref("text"); // 'text' 或 'background'
     const currentColor = ref("#000000");
@@ -406,8 +383,7 @@ export default {
       textColor.value = textObject.value.fill || "#000000";
       backgroundColor.value = textObject.value.textBackgroundColor || "#ffffff";
       hasTransparentBg.value = !textObject.value.textBackgroundColor;
-      opacity.value =
-        textObject.value.opacity !== undefined ? textObject.value.opacity : 1;
+      opacity.value = textObject.value.opacity !== undefined ? textObject.value.opacity : 1;
 
       // 样式
       fontWeight.value = textObject.value.fontWeight || "normal";
@@ -422,7 +398,7 @@ export default {
       // 转换字符间距为百分比显示
       charSpacingPercent.value = charSpacing.value / 10;
       textSpacing.value = charSpacingPercent.value; // 暂用相同值
-      baseline.value = 0; // Fabric.js没有直接支持基线偏移，用0初始化
+      // baseline.value = 0; // Fabric.js没有直接支持基线偏移，用0初始化
     };
 
     const selectFont = (fontName) => {
@@ -459,8 +435,7 @@ export default {
     // 颜色选择器相关功能
     const openColorPicker = (mode) => {
       colorPickerMode.value = mode;
-      currentColor.value =
-        mode === "text" ? textColor.value : backgroundColor.value;
+      currentColor.value = mode === "text" ? textColor.value : backgroundColor.value;
       showColorPicker.value = true;
     };
 
@@ -602,12 +577,12 @@ export default {
       executeCommand(command);
     };
 
-    // 基线更新 (Fabric.js没有直接支持，可能需要自定义实现)
-    const updateBaseline = () => {
-      console.log("基线调整功能待实现", baseline.value);
-      // 注意：Fabric.js 5没有直接支持基线调整
-      // 可能需要通过自定义处理或CSS方式实现
-    };
+    // // 基线更新 (Fabric.js没有直接支持，可能需要自定义实现)
+    // const updateBaseline = () => {
+    //   // console.log("基线调整功能待实现", baseline.value);
+    //   // 注意：Fabric.js 5没有直接支持基线调整
+    //   // 可能需要通过自定义处理或CSS方式实现
+    // };
 
     // 透明度更新
     const updateOpacity = () => {
@@ -662,7 +637,7 @@ export default {
       lineHeight,
       charSpacingPercent,
       textSpacing,
-      baseline,
+      // baseline,
       showColorPicker,
       colorPickerMode,
       currentColor,
@@ -690,7 +665,7 @@ export default {
       updateCharSpacing,
       updateTextSpacing,
       updateLineHeight,
-      updateBaseline,
+      // updateBaseline,
       updateOpacity,
       executeCommand,
     };