本项目是一个基于浏览器的AI视频分镜策划工具,旨在解决视频创作者在剧本分镜阶段需要频繁切换工具、素材管理混乱的问题。用户可以在画布上自由创建视频节点、拖拽操作、导入视频素材,并支持数据持久化存储与导出。项目采用纯前端技术栈,无需后端部署即可使用,适用于短视频编剧、分镜师、漫剧创作者等场景,大幅提升视频前期的策划效率。
点击空白处退出提示
本项目是一个基于浏览器的AI视频分镜策划工具,旨在解决视频创作者在剧本分镜阶段需要频繁切换工具、素材管理混乱的问题。用户可以在画布上自由创建视频节点、拖拽操作、导入视频素材,并支持数据持久化存储与导出。项目采用纯前端技术栈,无需后端部署即可使用,适用于短视频编剧、分镜师、漫剧创作者等场景,大幅提升视频前期的策划效率。
本工具主要包含以下功能模块:
1. 无限画布编辑器:支持鼠标拖拽平移、滚轮缩放,可在任意位置创建/删除视频节点
2. 节点管理系统:每个节点支持标题编辑、视频文件粘贴/拖拽导入、IndexedDB持久化存储
3. 框选与批量操作:右键拖拽框选多节点,支持批量移动、Delete批量删除
4. 撤回机制:Ctrl+Z支持最多5步撤回,覆盖节点增删、移动、缩放等操作
5. 连线系统:节点间可建立连线关系,点击选中、删除键删除
6. 导入导出:支持整体项目打包导出,含视频数据,可完整恢复
本项目完全由我独立开发,采用纯前端架构。技术栈为原生JavaScript + HTML5 Canvas + IndexedDB。实现亮点包括:1) Canvas坐标系转换实现平滑的拖拽平移与缩放;2) 右键框选算法支持快速矩形区域命中检测;3) 基于IndexedDB的Blob存储实现大视频文件的持久化,刷新不丢失;4) 命令模式实现多步撤回;5) 事件委托模式解决鼠标事件冲突(左键平移vs右键框选)。



评论