- 在线访问地址：https://jiangkuo888.github.io/LBEplanner
- 一键部署到 GitHub Pages：
npm installnpm run deploy- 访问你的 https://你的github用户名.github.io/LBEplanner
本项目是一个基于React + PixiJS的WebGL动块可视化编辑器，支持动块数据的导入、编辑、批量操作、场地图打点、导出等功能，适用于关卡设计、路径规划等场景。
- 数据读取与解析，支持playarea.json和PlayAreaBlockData_0.json双文件导入
- 动块可视化（多边形、编号、入口/出口、旋转）
- 选择、拖拽、旋转动块，支持多选批量操作
- 支持撤销/重做（Ctrl+Z/Ctrl+Y），操作更安全
- 画布自适应、手动缩放、重置缩放、右键无限平移
- 现代化UI（Ant Design），功能区分组清晰
- 场地图打点功能，支持闭合路径、点位导入导出、点位间距数值显示
- 场地图打点时第一个点可点击闭合，体验更友好
- 场地图拖动体验优化，拖动时不再跳到画布右下角，拖拽更平滑
- 多选动块批量旋转，支持Q/E键持续旋转
- 动块和场地图导入导出体验优化，支持自动适配和格式兼容
- 入口/出口显示切换，辅助信息显示
- 帮助说明与操作区同步，所有快捷键和交互说明已在界面帮助区和README同步
- 其它细节体验优化与bug修复
- 兼容旧版动块json格式
- 人流模拟
- 按照流程一步一步操作（如：1.选择场地 2.导入地图 3.绘制边界点 4.导入动块配置 5.适配 6.模拟 7.保存/下载 8.发布）
- 优化操作说明，快捷键说明
- ...
以PlayArea_0.json为例，动块数据结构如下：
{
"Name": "1-1", // 动块名称
"Index": 0, // 动块编号
"Points": [ // 多边形顶点数组
{ "Point": { "X": -281.9, "Y": 399.2 } },
...
],
"Entrance": { // 入口点
"Point": { "X": -179.99, "Y": 549.20 }
},
"Exit": { // 出口点
"Point": { "X": -179.99, "Y": 564.20 }
},
"DeltaYaw": 0 // 旋转角度（度）
}Points：定义多边形的顶点，顺序连接形成闭合区域。Entrance/Exit：分别为入口和出口的坐标点。DeltaYaw：该动块的旋转角度，单位为度。
- 前端框架：React
- 渲染引擎：PixiJS
- UI框架：Ant Design
- 数据处理：TypeScript
- 文件操作：File API
- PixiJS渲染：高效绘制多边形动块、场地图片、辅助网格、锚点等，支持动块的旋转、拖拽、缩放、批量操作。
- React状态管理：用Hook管理动块数据、选中状态、视图变换、图片状态等，交互事件均通过React状态驱动PixiJS渲染。
- Ant Design UI：侧边栏集成功能开关、数据导入导出、动块层级列表、属性面板等。
- 数据导入导出：支持JSON文件导入动块数据，自动适配画布视图，支持导出编辑后的动块数据和场地图点位。
- 单击动块：选中该动块（默认选中同一幕的所有动块）。
- 按住Shift键单击：多选/取消多选动块。
- 侧边栏可通过复选框多选/单选动块。
- 鼠标左键拖动选中动块移动。
- “可以移动单独动块”开关开启时，单选动块可独立拖动。
- 选中动块后，Q/E键旋转，长按持续旋转。
- 鼠标滚轮缩放视图，右键拖动画布平移。
- 导入场地参考图，支持PNG图片。
- 开启“场地图打点”后，鼠标左键依次打点，闭合后形成路径。
- 闭合后，点击图片并拖动可移动图片。
- 鼠标滚轮缩放图片，Q/E键旋转，A/D键持续缩放。
- 第一个点可点击闭合路径。
- 导入/导出点位JSON，支持新旧格式。
- 导入playarea.json：导入动块基础数据。
- 导入PlayAreaBlockData_0.json：仅合并BlockRotateZAxisValue字段。
- 导出playarea.json/PlayAreaBlockData_0.json：支持格式兼容与自动适配。
本PRD为WebGL动块编辑器的持续迭代文档，后续可根据实际开发和用户反馈持续完善。