阶段8落盘

网页粒子系统阶段八.md

@@ -1,6 +1,6 @@
 # 网页粒子系统 · 阶段八
 
-> 阶段定位：**Spine 骨骼选择、粒子独立骨骼跟随、对象显隐与所属动画管理定版**  
+> 阶段定位：**Spine 骨骼选择、粒子独立骨骼跟随、对象显隐、编辑效率与画布参考功能定版**
 > 完成日期：2026-08-29  
 > 工程目录：`/Users/tianmokeji/Desktop/SpineParticle`  
 > 技术栈：Vue 3 + TypeScript + Pinia + PixiJS 7 + Spine Runtime 4.2 + Vite
@@ -29,7 +29,11 @@
 12. 将时间轴“动画”升级为粒子系统“所属动画”管理；
 13. 支持所属动画新增、重命名、删除和最少一个动画保护；
 14. 移除画布右上角重复的秒数显示；
-15. 完成 Spine 4.2 测试资源下的交互与生产构建验证。
+15. 增加 Spine 资源文件夹一键加载；
+16. 修复统计数字、帧数和所属动画菜单的显示稳定性；
+17. 为四类场景对象增加独立复制功能；
+18. 增加画布背景图上传、偏移、透明度和清除功能；
+19. 完成 Spine 4.2 与背景图测试资源下的交互及生产构建验证。
 
 ---
 
@@ -395,7 +399,104 @@ emitterFollowBoneScaleY
 
 ---
 
-## 九、验证结果
+## 九、编辑效率与画布参考功能
+
+### 9.1 Spine 文件夹一键加载
+
+Spine 资源面板在原有骨架数据、Atlas 和纹理分别选择的方式之外，增加文件夹加载入口。
+
+选择文件夹后会自动识别：
+
+- 一个 `.json` 或 `.skel` 骨架数据文件；
+- 一个 `.atlas` 图集文件；
+- 文件夹中的 `.png`、`.jpg`、`.jpeg`、`.webp` 纹理；
+- Atlas 实际引用的多张纹理页面。
+
+识别完成后直接执行与原三步选择相同的 Spine 4.2 加载流程，保留原有分文件选择方式作为兼容入口。
+
+### 9.2 当前场景对象独立复制
+
+场景对象标题栏在 `＋Spine` 后增加 `+Copy` 按钮。按钮读取场景树当前选中项，支持复制：
+
+- 粒子系统；
+- 碰撞体；
+- 路径；
+- Spine。
+
+复制完成后，新对象自动成为当前选中对象，并使用不重复名称：
+
+```text
+ParticleSystem1 Copy
+ParticleSystem1 Copy 2
+...
+```
+
+复制规则如下：
+
+- 面板参数、曲线、标签、路径点和 Spine 元数据进行深度复制；
+- 修改副本参数不会反向修改原对象；
+- 粒子录制帧属于运行时缓存，不复制旧缓存，由副本按照相同配置重新生成；
+- Spine 层级树的临时骨骼选择不复制，副本默认不选中骨骼；
+- 已加载的 Spine 解析结果和纹理作为只读资源安全共享；
+- Spine 资源注册表使用引用计数，删除任一副本不会提前销毁其他副本仍在使用的纹理；
+- 粒子系统原有的 Spine 骨骼跟随目标、所属动画和全部效果参数保持不变。
+
+当场景树不存在有效选中对象时，`+Copy` 自动置灰。
+
+### 9.3 时间轴与统计显示稳定性
+
+本阶段补充修复了以下界面问题：
+
+- 画布左下角系统数量和粒子骨骼数量使用固定宽度与等宽数字，单位数和多位数切换时不再推动后方文字；
+- 粒子骨骼数量保持左对齐，数值区域位置固定；
+- 时间轴当前帧与总帧作为一个整体固定显示，不再被布局拆开；
+- 非循环播放到末帧后再次播放会从头开始；
+- 再次播放时，粒子活动数量和粒子骨骼数量持续按当前回放帧更新，不再停留在第一次播放结果；
+- “所属动画”菜单改为向上展开，避免靠近屏幕底部时被裁切；
+- 修复向上菜单因时间轴父级裁切和层级关系导致点击无效的问题。
+
+### 9.4 画布背景图
+
+画布顶部工具栏增加“背景图”按钮。下拉面板提供：
+
+| 控件 | 行为 |
+|---|---|
+| 上传图像 / 更换图像 | 选择 `.png`、`.jpg`、`.jpeg` 或 `.webp` 图片 |
+| 清除背景 | 移除当前背景并释放纹理资源 |
+| X / Y | 调整背景在画布世界坐标中的位置偏移 |
+| 透明度 | 在 0%～100% 范围内调整背景显示透明度 |
+
+背景图片锚点位于图片中心，使用与其他场景对象一致的世界坐标方向，并跟随画布整体缩放和平移。
+
+背景 Sprite 是 `world` 容器中的第一个绘制节点，因此显示优先级低于：
+
+- Spine；
+- 粒子系统；
+- 碰撞体；
+- 路径；
+- 发射点、变换工具和其他画布辅助图形。
+
+背景图只用于编辑器预览，不参与粒子碰撞、路径采样、时间轴长度或导出数据计算。
+
+“清除背景”在没有图片时置灰。执行清除后：
+
+```text
+背景资源：无
+X / Y：0 / 0
+透明度：100%
+```
+
+同时撤销临时对象 URL 并释放 PixiJS 纹理，避免反复更换或清除图片产生资源泄漏。
+
+项目中的测试图片为：
+
+```text
+public/background/bg.png
+```
+
+---
+
+## 十、验证结果
 
 本阶段使用 `public/spine/` 中的 Spine 4.2 测试资源完成验证：
 
@@ -421,6 +522,15 @@ emitterFollowBoneScaleY
 - 所属动画新增、重命名和删除；
 - 删除最后一个动画被禁止；
 - 两个粒子系统分别保存 `animation` 与 `animation2`；
+- Spine 文件夹选择可以一次识别骨架数据、Atlas 和多纹理资源；
+- `+Copy` 可以分别复制粒子、碰撞体、路径和 Spine；
+- 修改粒子副本名称后，原粒子系统名称保持不变；
+- Spine 副本可以安全共享已加载资源；
+- 背景图下拉面板正常显示上传、清除、X/Y 和透明度控件；
+- `public/background/bg.png` 可以成功加载到画布底层；
+- 背景图 X/Y 偏移与透明度可以实时调整；
+- 未加载背景时“清除背景”按钮正确置灰；
+- 统计数字和时间轴帧数显示不再因位数变化产生布局跳动；
 - 页面交互过程中无控制台错误；
 - `npm run build` 生产构建通过；
 - `git diff --check` 通过。
@@ -429,7 +539,7 @@ emitterFollowBoneScaleY
 
 ---
 
-## 十、当前限制
+## 十一、当前限制
 
 1. Spine 资源仍通过本地文件选择器加载，刷新后需要重新选择；
 2. Spine 皮肤、插槽、约束和动画混合尚未开放；
@@ -438,11 +548,15 @@ emitterFollowBoneScaleY
 5. 所属动画当前只保存分组关系，尚未影响时间轴轨道筛选、播放范围或导出结果；
 6. 场景对象小眼睛状态尚未纳入持久化工程文件；
 7. Spine 预览动画当前一次控制一个预览对象，尚未提供多 Spine 联动选择界面；
-8. 主包仍包含 Spine 运行时和主要编辑器模块，尚未进行动态拆包。
+8. 主包仍包含 Spine 运行时和主要编辑器模块，尚未进行动态拆包；
+9. 背景图片来自浏览器本地文件选择，刷新页面后需要重新上传；
+10. 背景图当前只提供位置和透明度，不提供旋转、缩放、适配画布或锁定操作；
+11. 背景图仅用于编辑器显示，尚未纳入工程保存格式和最终导出；
+12. 场景对象复制当前在内存场景中完成，工程保存与跨项目粘贴仍待后续实现。
 
 ---
 
-## 十一、阶段九建议
+## 十二、阶段九建议
 
 1. 建立正式场景工程保存格式，持久化对象显隐、所属动画和骨骼绑定；
 2. 实现项目打开、保存、另存为和自动恢复；
@@ -453,4 +567,7 @@ emitterFollowBoneScaleY
 7. 增加 Spine 皮肤、插槽和动画混合控制；
 8. 建立多 Spine、多粒子系统、多骨骼绑定的自动回归测试；
 9. 对 Spine 面板和曲线编辑器进行动态加载，降低主包体积；
-10. 补充资源丢失、骨骼改名和动画删除后的导入迁移提示。
+10. 补充资源丢失、骨骼改名和动画删除后的导入迁移提示；
+11. 将背景图路径、位置和透明度纳入工程文件，并支持重新定位丢失资源；
+12. 为背景图增加适配画布、原始尺寸、缩放和锁定操作；
+13. 为场景对象复制增加撤销/重做，以及跨工程复制粘贴支持。