画布内容储存,pose等入参回显

2025-07-22 18:16:33 +08:00
parent c06fd06d82
commit 3652e0a384
22 changed files with 429 additions and 322 deletions
--- a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
@@ -635,7 +635,7 @@ function buildContextMenuItems(layer) {
  contextMenuItems.value = [
    // 重命名
    {
-      label: "重命名",
+      label: t('Canvas.Rename'),
      icon: "CFont",
      disabled: isMultiple || layer.isBackground || layer.isFixed,
      action: () => startEditing(layer),
@@ -643,14 +643,14 @@ function buildContextMenuItems(layer) {
    { type: "divider" },
    // 复制
    {
-      label: isMultiple ? `复制 ${selectedLayers.length} 个图层` : "复制图层",
+      label: isMultiple ? `${t('Canvas.Copy')} ${selectedLayers.length} ${t('Canvas.Layers')}` : t('Canvas.copyLayer'),
      icon: "CPaste",
      disabled: !canCopyLayers.value,
      action: () => copySelectedLayers(),
    },
    // 删除
    {
-      label: isMultiple ? `删除 ${selectedLayers.length} 个图层` : "删除图层",
+      label: isMultiple ? `${t('Canvas.delete')} ${selectedLayers.length} ${t('Canvas.Layers')}` : t('Canvas.deleteLayer'),
      icon: "CDelete",
      disabled: layer.isBackground || layer.isFixed || !canDeleteLayers(),
      danger: true,
@@ -688,7 +688,7 @@ function buildContextMenuItems(layer) {
    // },
    // 组合图层
    {
-      label: "组合图层",
+      label: t('Canvas.groupLayer'),
      icon: "CPicture",
      disabled: layer.isBackground || layer.isFixed || !layerManager?.canRasterizeLayer?.(layer.id),
      action: () => {
@@ -698,7 +698,7 @@ function buildContextMenuItems(layer) {
    },
    // 导出图层
    {
-      label: "导出图层",
+      label: t('Canvas.exportLayer'),
      icon: "CExport",
      disabled: layer.isBackground || layer.isFixed || !layerManager?.canRasterizeLayer?.(layer.id),
      action: () => {
@@ -709,11 +709,11 @@ function buildContextMenuItems(layer) {
    { type: "divider" },
    // 分组操作 - 带子菜单
    {
-      label: "分组操作",
+      label: t('Canvas.groupingOperation'),
      icon: "CGroup",
      children: [
        {
-          label: "创建组",
+          label: t('Canvas.createGroup'),
          icon: "CCreateGroup",
          disabled: !canGroupLayers.value,
          action: () => {
@@ -722,7 +722,7 @@ function buildContextMenuItems(layer) {
          },
        },
        {
-          label: "解组",
+          label: t('Canvas.unzipGroup'),
          icon: "CCancelGroup",
          disabled: !canUngroupLayers.value,
          action: () => {
@@ -743,7 +743,7 @@ function buildContextMenuItems(layer) {
    },
    // 图层操作 - 带子菜单
    {
-      label: "图层操作",
+      label: t('Canvas.layerOperation'),
      icon: "CLayout",
      children: [
        // // 锁定/解锁
@@ -761,7 +761,7 @@ function buildContextMenuItems(layer) {
        // },
        // { type: "divider" },
        {
-          label: "置顶",
+          label: t('Canvas.sticekToTop'),
          icon: "CBottom",
          inverIcon: true, // 倒置图标
          disabled: layer.isBackground || layer.isFixed || !layerManager?.canMoveToTop?.(layer.id),
@@ -771,7 +771,7 @@ function buildContextMenuItems(layer) {
          },
        },
        {
-          label: "向上移动",
+          label: t('Canvas.MoveUpOneLayer'),
          icon: "CUp",
          disabled: layer.isBackground || layer.isFixed || !layerManager?.canMoveToTop?.(layer.id),
          action: () => {
@@ -780,7 +780,7 @@ function buildContextMenuItems(layer) {
          },
        },
        {
-          label: "向下移动",
+          label: t('Canvas.MoveDownOneLayer'),
          icon: "CDown",
          disabled:
            layer.isBackground || layer.isFixed || !layerManager?.canMoveToBottom?.(layer.id),
@@ -790,7 +790,7 @@ function buildContextMenuItems(layer) {
          },
        },
        {
-          label: "置底",
+          label: t('Canvas.SinkToBottom'),
          icon: "CBottom",
          disabled:
            layer.isBackground || layer.isFixed || !layerManager?.canMoveToBottom?.(layer.id),
--- a/src/component/Canvas/CanvasEditor/components/SelectionPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/SelectionPanel.vue
@@ -4,7 +4,7 @@
      <!-- 顶部选区类型工具栏 -->
      <div class="toolbar-section">
        <div class="toolbar-header">
-          <div class="header-title">{{ t("选区工具") }}</div>
+          <div class="header-title">{{ t("Canvas.LassoTool") }}</div>
          <!-- 移除关闭按钮，完全通过工具切换控制显示隐藏 -->
        </div>

@@ -17,7 +17,7 @@
            @click="setSelectionType(OperationType.LASSO)"
          >
            <svg-icon name="CFree" size="20" />
-            <span>{{ $t("手绘") }}</span>
+            <span>{{ $t("Canvas.freehandSketching") }}</span>
          </div>
          <div
            :class="[
@@ -27,7 +27,7 @@
            @click="setSelectionType(OperationType.LASSO_RECTANGLE)"
          >
            <svg-icon name="CRectangle" size="26" />
-            <span>{{ $t("矩形") }}</span>
+            <span>{{ $t("Canvas.rectangle") }}</span>
          </div>
          <div
            :class="[
@@ -37,7 +37,7 @@
            @click="setSelectionType(OperationType.LASSO_ELLIPSE)"
          >
            <svg-icon name="CEllipse" size="24" />
-            <span>{{ $t("椭圆") }}</span>
+            <span>{{ $t("Canvas.ellipse") }}</span>
          </div>
        </div>

@@ -48,15 +48,15 @@
        <div class="tool-actions">
          <div class="action-btn" @click="copySelectionToNewLayer">
            <svg-icon name="CPaste" size="16" />
-            <span class="btn-text">{{ $t("创建") }}</span>
+            <span class="btn-text">{{ $t("Canvas.creation") }}</span>
          </div>
          <div class="action-btn" @click="cutSelectionToNewLayer">
            <svg-icon name="CCut" size="26" />
-            <span class="btn-text">{{ $t("创建并拷贝") }}</span>
+            <span class="btn-text">{{ $t("Canvas.CreateAndCopy") }}</span>
          </div>
          <div class="action-btn" @click="clearSelectionContent">
            <svg-icon name="CClear" size="18" />
-            <span class="btn-text">{{ $t("清除选择内容") }}</span>
+            <span class="btn-text">{{ $t("Canvas.TheClearlySelectedContent") }}</span>
          </div>
          <!-- <button
            class="action-btn"
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -135,6 +135,12 @@ const lastSelectLayerId = ref(null); // 最后选择的图层ID
 // 当前选择的工具
 const activeTool = ref(CanvasConfig.defaultTool); // 默认工具

+
+//监听画布元素宽度是否发生变化
+let observer = null
+let observerTime = null//加入防抖
+
+
 // 管理器实例
 let canvasManager = null;
 let layerManager = null;
@@ -407,10 +413,22 @@ onMounted(async () => {
      }, 300);
    });
  });
-
+  
+	observer = new ResizeObserver(entries => {
+		for (let entry of entries) {
+			clearTimeout(observerTime)
+			observerTime = setTimeout(()=>{
+				nextTick(()=>{
+					handleWindowResize()
+				})
+			},100)
+			// const { width } = entry.contentRect;
+		}
+	});
+	observer.observe(canvasContainerRef.value);
  // 使用window的resize事件代替ResizeObserver
  // 只有当窗口大小变化时才更新画布尺寸
-  window.addEventListener("resize", handleWindowResize);
+//   window.addEventListener("resize", handleWindowResize);
 });

 watchEffect(() => {
@@ -454,11 +472,13 @@ onBeforeUnmount(() => {
  redGreenModeManager = null;

  // 移除window resize事件监听
-  window.removeEventListener("resize", handleWindowResize);
+//   window.removeEventListener("resize", handleWindowResize);
+	observer.unobserve(canvasContainerRef.value);
 });

 // 窗口大小变化处理函数
 function handleWindowResize() {
+	console.log(132)
  // 使用requestAnimationFrame来防止频繁更新
  requestAnimationFrame(() => {
    // 更新画布大小并自动居中所有元素