js-mind
Development
- Install npm packages
npm install
- Launch dev server
npm run start
- Build
npm run build
演示
Install js-mind
npm install js-mind --save部分功能实现思路
Mind
Mind 类提供对外接口，维护节点树，并调用其它类完成相关工作
Stage
Stage 类主要功能：
- 画布管理：维护画布的宽高、缩放比例、偏移位置等信息
- 事件管理：添加不同类型的事件，储存回调函数
Scene
Scene 类主要功能：
- 绘制管理
- 画笔状态管理
Node
Node 和其派生类主要功能：
- 节点绘制
- 事件检测：检测鼠标事件的坐标是否在自身宽高以内，如果是，调用 Stage 中对应的事件回调函数
- 动画管理：主要是节点属性的动态更新
Liner
- 线条管理
- 不同类型的线条绘制
- 缓存线条，线条绘制比较耗费性能，解决思路如下
- 当没有缓存的时候，绘制所有线条到 CanvasA, 并缓存 CanvasA
- 当有缓存的时候，将缓存的 CanvasA 绘制到主 Canvas
- 节点树发生变化时清除 CanvasA 缓存
Undo 类
实现撤销重做功能
- 用户更新节点树时，通过
diff算出前后节点树对应的data差异，并保存为 Step - 用户撤销重做，根据当前节点树和 Step 做对比，还原出前一步或后一步的
data - 更新
data并重绘