Chart Canvas 组件化（react 方向）持续更新中....

为什么要做这个组件呢

• 原因一：去年华为有一个可视化工具的竞赛，当时公司要做客户端经常加班（产品就是想抄个钉钉和飞书），当时也是初入客户端（electron），后期可以加一期 初入electron ,也就忽略了。
• 原因二：今年本人离职后找工作发现现在的市场需求是
  1. canvas: chart,threejs,webGL
  2. 低代码平台: 主要就是 UI 模板 和 ui 数据等待

原因是这两个原因，最后先从自己稍微掌握一点的 canvas 入手。

思考方向

canvas 基础需要知道的

1. canvas 在 html 中实际上就是个标签
2. 原生 js 中如果你要操作 canvas 需要获取到当前 canvas 标签的 dom
3. 创建 ctx.......巴拉巴拉（就不赘述了，推荐掘金查看写 canvas 基础）
4. canvas 中图形并非实例，而是通过 ctx 的方法绘制出图形

react 结合 Canvas

错误案例：heitu.wang/canvas/stag…

这里的想法其实 是有问题的 后面有改进方案

1. react 的自定义组件是以标签形式存在的
2. 我这里将 canvas 抽象成最外层的父组件 Stage(后续都这么称呼)其中可以使用 useContext 存储 所有图形 事件的信息
3. 将各种图形 抽象成标签，Stage 中基于 标签名将图形 / 图形标签中所带属性事件 塞入 context 中 图形树中
4. 给图形排序，遍历树 渲染 canvas
5. 我这里将 canvas 的事件抽象成一个 自定义 hook，初始化简历完 ctx 后会创建所有事件的监听, 根据鼠标位置和图形位置操作该图形 根据图形的层级 处理冒泡、捕获事件
6. 拖拽需要单独拎出来做处理

• OOP 结合 Canvas

这里是上面错误想法的改进方案，为什么说上面想法是错误的呢

其一 canvas 的抽象全部集成在 react中会使代码十分抽象而且冗余,会使得后续编写十分困难寸步难行（别问我怎么知道的，哈哈）。如果将 canvas 抽象成每一个对象 各自拥有自己属性 拥有各自能力，后续会十分方便

其二Canvas 是要处理高并发的 ，react 中使用 hook 并不能处理成千上万的数据，如果将canvas内部实现抽象成js代码后续可以将这些代码放入 Web Worker 中 执行

更新中。。。