组织结构图Canvas版

需求

外资撤场，市场留下空白。公司要研发一款全新的HR系统，用来打响抢占市场第一枪。 其中组织管理模块的组织结构图需求，是新系统的难点之一。

• 需求
• 现状
• 难点
• 实现

现状

公司目前实现组织结构图，使用的是付费库gojs。组织卡片样式、结构图布局等均无法满足新的需求。 一些开源库也或多或少不能完全满足新的需求，领导希望我完成这个任务，尽快出一个样例给客户演示。

难点

经过调研（搜索引擎咯）与尝试，否定了HTML绘图，使用Canvas或者SVG（Echarts这么干的）;

下面是我使用Canvas实现的思路。

用Canvas绘制卡片内容，大部分可以做到和HTML一样。以下是不同的点：

1. Canvas绘制的文字不能自适应宽高、换行。（有单独文章介绍：结构图插件系列：SVG文字排版）
2. Canvas的点击事件，只能获取到当前像素点的颜色值。无法像DOM点击事件那么方便。 下面，重点讲解点击事件。

实现

思路也是借鉴来的。 我们需要绘制两块Canvas画布，一块用来展示内容，一块用来绘制颜色块。 这是展示内容的状态，也就是正常状态：

展示内容上方，绘制了一模一样的结构图，颜色块层（给了0.5的透明度，方便演示）：

1. 每个内容元素都配置一个唯一id（number）。如：一段文字、一个按钮、一个矩形都是一个内容元素。
2. 每个内容元素都有x,y,width,height属性，决定内容绘制的位置和范围。
3. 把id转换成rgb颜色值，在颜色层根据x,y,width,height和颜色绘制一个矩形块，对应内容矩形。
4. 颜色层整个opacity=0透明，所以看不到的。
5. 颜色层在上方，鼠标点击的时候，点击的使眼色块，可以获取到颜色值rgb，范转换为id。
6. 根据id就能找到对应的元素的配置内容。
7. 根据需求修改对应元素的配置，重绘一次Canvas就能得到更新后的效果了。