canvas ppt在线文档实现大概思路学习canvas实现ppt在线文档研究 ppt 的导入导出研究canvas文

思路图

插件功能目录结构

└── plugins                    // 画板组件
    ├── command                // 操作命令方法
    ├── config                 // 参数配置项
    ├── editor                 // 编辑
    ├── listener               // 监听
    ├── screen                 // 预览
    ├── shortCut               // 快捷键功能
    └── stage                  // 画布

1、画布结构

画布主要分为两层，一层主控制，一层主渲染。所有的编辑操作都由控制层开始，控制的显示都在控制层上绘制，并修改对应的页面数据，然后交给渲染层执行渲染绘制。而预览只引入使用渲染层。

└── stage                    // 画布
    ├── draw                 // 绘制元素的方法集合
    ├── config.ts            // 绘制页面的配置参数
    ├── contextmenu.ts       // 右击菜单功能
    ├── control.ts           // 控制层
    ├── cursor.ts            // 文本光标
    ├── index.ts             // 画布功能主入口
    ├── text.ts              // 文本输入
    ├── textarea.ts          // 输入框
    └── view.ts              // 渲染层

2、编辑

编辑通过indexDB进行操作存储，这样来实现操作的撤销与恢复。

└── editor                   // 编辑
    ├── index.ts             // 功能主入口
    ├── db.ts                // indexDB功能
    └── history.ts           // 历史记录

3、预览

└── screen                   // 预览
    ├── index.ts             // 功能主入口
    ├── view.ts              // 预览入口
    └── thumbnail.ts         // 缩略图入口

实现功能

基础功能

历史记录（撤销、重做）
右键菜单

幻灯片页面编辑

幻灯片元素编辑

文字

图片

形状

图表

表格

插入表格

视频

音频

插入音频

公式

幻灯片放映

预览放映
画笔功能

electron版本

网页唤醒或下载客户端
对应文件格式打开
编辑保存
另存为

思考待解决问题

图片拉伸和适配两种模式
~~不规则形状如何判断点在形状内（目前选中元素都是以矩形区域判断，当两个形状重叠时，看到是选的A元素，确展示的是选中的B元素）~~
形状后面要考虑增加点位控制可调整的功能
~~翻转后且存在旋转，鼠标拖拽的距离和实际变化的宽高存在误差，待解决~~ （翻转目前改成控制框不随着翻转）
渲染canvas和控制canvas，原先设想降低渲染操作对性能的损耗，渲染canvas只做渲染工作，操作元素全在控制canvas，但是控制层在渲染层之上，导致被选中操作的元素会在最高层，遮挡其他元素，但是根据层级选中的元素可能是最底层级的，目前优化方案改为，操作绘线，绘制新增元素效果依旧在控制层，其余元素变动转移到渲染层，但是频繁的渲染，加上渲染层元素很多时，会成倍增加性能的消耗
导出采用pptxgenjs第三方库，但是有许多方面不支持，后面考虑借鉴补充实现完善一下(pptxgenjsbug导出音频不成功，还是视频)
导入功能插件待完善导入插件analyze-pptx