需要实现一版多队带有进度节点的看板图，需要基于效需求，调研了可视化echarts的关系图、原生canvas等实现方式，选择用原生canvas来实现效果，在熟悉canvas过程中，了解到插件konvaJS提供了丰富的api和图形支持，可以像操作dom一样来操作canvas，提供丰富的图形绘制api，支持对canvas元素的事件操作，性能更加优异。

什么是Konva?

Konva是一个基于 Canvas 开发的 2d JavaScript框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果，可以实现高性能动画, 过渡, 节点嵌套, 局部操作, 滤镜, 缓存, 事件等功能, 不仅仅适用于桌面与移动开发, 还有更为广泛的应用。允许在舞台上绘图, 添加事件监听, 移动或缩放某个图形, 独立旋转, 以及高效的动画. 即使应用中含有数千个图形也是可以轻松实现的.

2. 基础元素

konva的图形树示意图如下：

              Stage
|
+——+——+
|             |
Layer         Layer
|             |
+—–+—–+     Shape
|           |
Group       Group
|           |
+       +—+—+
|       |       |
Shape   Group    Shape
|
+
|
Shape

关键字：舞台stage、层layer、组group、图形shape

• 根节点stage称为舞台，在创建舞台的时候需要包裹挂载的dom节点id，整个视图看做一个舞台；

• 层layer可以理解为图层，每个图层都有两个元素：场景层和交互层，场景层用于绘制可见图形，交互层用于高性能交互事件的监听；

• 组group为容器元素，可管理多个图形或者组，组也可以管理组；

• 图形shape提供基础的元素图形：比如三角形，圆形，文本，线条，多边形，路径，箭头等。

3. 插件引入

3.1. , 下载 KonvaJS 代码，使用 script 标签导入需要使用的 Konva 库. 

3.2. npm 安装

   npm install konva –save
var Konva = require(‘konva’);
import Konva from ‘konva’;

3.3. cdn加载

   <script src=”https://juejin.cn/post/unpkg.com/konva@^4.0.…

4. 基本使用 步骤

• step1.创建舞台stage

 挂载dom元素

• step2.创建层layer，并在层上做图

• step3.绘制图形(圆)

对应api参数有详细的配置

• step4. 图形添加到组，组添加到层上，将层绘制到舞台

5. 看板实现

5. 1.实现思路

在提供基础组件和图形后，需要结合业务和效果图，将基础组件与业务结合，多个图形节点需要算法排位

5. 2.算法步骤

• step1. 整体界面元素布局

以50px*50px的单元格划分整个舞台，最小间隔确保展示效果稳定；

将舞台宽划分为14份，起始结束各占2/14，中间团队进度占10/14，依据进度绘制2/14、12/14处分割线；

舞台的高由团队个数16*50px确定；

• step2. 绘制起始结束点

各取中心点作为圆心，绘制圆图形，添加文字描述，起始点连线到起始分割线，结束分割线连线到结束点；

• step3.绘制团队进度节点

各团队以高度50px间隔为一行，依据团队数据状态绘制状态节点，颜色区分当前进度；

• step4.依据状态节点进行连线

当前进度节点左右两侧区分不同颜色，结束节点直连到结束分割线；

5. 3.代码实现

6. 总结

相比较canvas，konvaJS在基础图形的实现上提供了便捷的api，在开发的过程中不用过分关注基础图形实现，可以投入更多精力在图形的组合和排布上；

性能优化相比较于canvas，每步的节点绘制是在内存中加载，最终的layer.draw();会将全部挂载到dom上极大的节省性能；

整体看板实现的核心是在对众多基础节点的布局定位算法和实现思路；

这个版本的看板只是实现了静态的展示没有提供用户交互，但是konvaJS更多优势所在的高性能交互，当众多节点监听用户交互的时候konvaJS的性能优势会更显著。