# 画布与贴纸功能 本文档描述当前前端代码中已经实现的画布设计功能。事实来源是 `frontend/src/App.tsx`、`frontend/src/pages/CanvasStudio.tsx`、`frontend/src/components/ExportPanel.tsx`、`frontend/src/lib/stickerLibrary.ts` 和 `frontend/src/types.ts`。 ## 页面关系 - 应用默认进入画布设计页。 - 画布页顶部的“添加词云”会切换到原有词云生成页。 - 词云生成页顶部的“返回画布”会回到画布设计页。 - 词云生成页的导出面板保留下载 SVG/位图功能，并新增“作为贴纸导入贴纸库”。 ## 贴纸库 贴纸库是前端本地能力，不依赖后端接口： - 存储位置：`localStorage` 的 `wordcloud-sticker-library`。 - 数据类型：`StickerAsset`，当前支持 `svg` 和 `image` 两类，已实现入口主要使用 `svg`。 - 用户导入 SVG：画布页左侧“贴纸”面板读取 `.svg` 文件文本，写入贴纸库，并立即插入画布。 - 词云作为贴纸：导出面板按当前 SVG 导出参数请求 `/api/jobs/{job_id}/custom.svg`，读取返回的 SVG 文本后写入贴纸库。 - 贴纸删除只删除本地贴纸库记录，不会删除已经导出的总图文件。 ## 画布模型 画布文档保存在 `localStorage` 的 `wordcloud-canvas-document`。 当前模型字段： - `width`：画布宽度，默认 `1600`。 - `height`：画布高度，默认 `1000`。 - `background`：画布背景色，默认 `#ffffff`。 - `elements`：画布元素数组。 当前元素类型： - `sticker`：引用贴纸库中的 SVG 或图片。 - `text`：普通文字，支持内容、颜色、字号、字体、字重、位置、尺寸、旋转、透明度。 - `rect`：矩形，支持填充、描边、描边宽度、位置、尺寸、旋转、透明度。 - `ellipse`：椭圆，支持填充、描边、描边宽度、位置、尺寸、旋转、透明度。 - `line`：线条，支持描边、描边宽度、位置、尺寸、旋转、透明度。 ## 编辑行为 - 点击贴纸库中的贴纸会把该贴纸插入画布中央区域。 - 画布元素可拖拽移动。 - 选中元素后可通过右下角手柄调整大小。 - 右侧属性面板可以精确编辑位置、尺寸、旋转、透明度和元素特有属性。 - 右侧属性面板提供上移、下移和删除。 - 画布面板支持修改画布宽高、背景色、导出 SVG、清空画布。 ## SVG 导出 “导出总图 SVG”由前端序列化当前画布模型完成： - 导出文件名：`canvas-design.svg`。 - 背景输出为一个覆盖全画布的 ``。 - 贴纸输出为 ``，SVG 贴纸会以内联 `data:image/svg+xml` 的形式嵌入。 - 文字输出为 ``。 - 基础形状输出为原生 SVG 的 ``、``、``。 - 元素的位移和旋转写入 SVG `transform`，透明度写入 `opacity`。 ## 当前边界 - 贴纸库和画布文档只保存在当前浏览器本地，不会跨浏览器或跨设备同步。 - 当前没有服务端素材库、项目文件格式或协作编辑接口。 - SVG 导入按用户信任文件处理；编辑器预览使用图片方式加载，不在页面中直接执行 SVG 内容。 - 当前缩放只影响编辑视图，不改变导出尺寸。 - 当前导出目标是 SVG；没有在画布页实现 PNG/JPG 总图导出。