记一次绘图框架技术选型: jsPlumb VS mxGraph

公司项目须要用到绘图框架，绘图部分之前是另外一位同事负责，用的是 jsPlumb 框架。因为人员流动，后来这部分我接手了。项目绘图业务需求变得愈来愈复杂，jsPlumb 已经知足不了咱们项目，因而我将目光投到了其余绘图框架。本文主要说说我在使用 jsPlumb 遇到的问题，以及我为何选择 mxGraph。

jsPlumb

jsPlumb 有社区版跟收费版，咱们使用的是社区版，下面提到的问题在收费版不必定存在。

1. 不稳定
2. 没有内置导航器(收费版是有这个功能的)
3. 没有智能布局功能
4. 没有作图层管理
5. 没有集成截图功能
6. 画布没有边界自动扩充功能

• 不稳定

  主要体如今两点

  1. 还原图形偶尔会报一些莫名其秒的错误，还原失败
  2. 链接线条偶尔会发生线条位置错乱的状况

这多是因为我使用 jsPlumb 不当引发的，又或者是框架自己存在问题，到最后都没法定位问题所在。但确实我在网上也看到有同窗遇到过类似不稳定的状况。

• 没有内置导航器

  
  (这是后来我用 mxGraph 作出来的)

  导航器为分两个功能：第一个是放大、缩小，第二是可拖拽改变视口的 minimap。对于放大、缩小这个功能，咱们用 css scale 来对整个画布进行缩放。但这个方法的缺点很快就暴露了，缩放后节点位置会发生改变；至于 minimap 要实现的话无异于重复造轮子，团队资源有限，这个功能当时搁置了。

• 智能布局

  产品有一个需求是将用户 Excel 表中的数据用图形的方式展现，这就须要智能布局功能，否则程序不知道节点应该放置在什么地方才美观。实现这个功能要使用比较复杂的算法，团队资源有限，这个功能当时也搁置了。

• 没有作图层管理

  jsPlumb 没有作图层管理，致使绘图过程当中作不到一些想要的图层叠加效果，要作的话只能本身用 z-index 去控制，这无疑增长了项目维护成本。并且 jsPlumb 的靶点是经过绝对定位附着在节点上的，你须要管理的不只仅是节点的 z-index 还有靶点的 z-index。

• 没有集成截图功能

  在用户绘图过程当中作了任何改变图的外观的操做咱们都须要对当前图形截图，而后同步到服务端做为该图形的封面。jsPlumb 没有内置的截图功能，咱们使用 html2canvas 将 html 转换成 canvas 再转换成 png，而后发送到服务端。但 html2canvas 截图时会有1秒左右的卡顿，这下降了用户体验，并非咱们想要的。

• 画布没有边界自动扩充功能

  因为 jsPlumb 采用的是svg和html混排的作法，节点都是html，画布的边界天然是程序设定的 div 容器。节点多了或者用户想把节点拖远点都须要扩充画布边界，这又成了一个技术难题。当时咱们只好用缓兵之计把画布写死成 5000 * 5000。

说了这么多 jsPlumb 的很差，我并无黑这个框架的意思。毕竟 jsPlumb 如今的 start数、npm下载量都是绘图框架中最高的，确定有它的过人之处，只是并不适合咱们的项目。jsPlumb采用的是svg和html混排的作法，全部节点都是html，全部连线都是单独的svg节点包裹的path元素，对于高度定制化节点样式是很是方便的，我认为静态展现的图形很是适合使用 jsPlumb 绘制。

mxGraph

基于以上说起到的种种缘由，上年年底我作起了技术调研，但愿能找到一个合适咱们项目的绘图框架。目标很是明确，我要找的框架能帮助我解决上面全部的问题。一番谷歌筛选后，发现 mxGraph 跟 GoJS 都是能解决咱们项目问题的，由于 GoJS 是闭源收费的，最后我选择了 mxGraph。

• 稳定性

  draw.io 是一个比较知名的开源绘图网站，就是用 mxGraph 进行开发的。这个绘图工具我偶尔也会使用，还试过出现 BUG 的状况。有 draw.io 当背书，我相信 mxGraph 的稳定性是靠得住的。

• 功能

  mxGraph 官方提供差很少 90 个例子，从这些例子跟 draw.io 中我能够肯定我想要的功能 mxGraph 均可以帮助我实现。导航器、智能布局对于 mxGraph 来讲只是一个 API 调用的事。mxGraph 的画布彻底基于 svg，自定义节点样式，彻底经过 js 完成，比较麻烦。但这对于 mxGraph 自身作图层管理是有好处的，对于开发都来讲管理图形层叠也只是几个 API 的事，也不用管什么 z-index 了。因为画布彻底基于 svg，不像 jsPlumb 用 html + svg 实现画布，因此 mxGraph 能够作到导出结构化的文档（XML），也再也不须要使用 html2canvas 帮助截图，只须要调用几个接口导出当前文档发送给服务端，而后服务端经过 Java 版 (咱们项目使用的是 Java，mxGraph 服务端环境还提供有 PHP、C#) mxGraph 将文档转换成图片，这样便解决了截图的问题。画布边界扩充也的问题也不用关心，mxGraph 已经帮助咱们作了。再就是 draw.io 已经用 mxGraph 实现了复杂的绘图功能，相信即使之后咱们的业务有更复杂的扩展这个框架也是能扛得住的。

• 社区

  mxGraph 在 stackoverflow 上有虽然有250个左右相关问题，不过大多数都是回答数比较少，这是我当时比较担心的一点。

• 兼容性问题

  项目对浏览器兼容性比较宽松，浏览器兼容性问题不在考虑范围以内。但交互上须要兼容iPad，从 mxGraph 的官方 Demo 中得知 mxGraph 对这方面有作兼容的，能够放心使用。

• 缺点

  • 文档不够友好(我的认为与GoJS文档水平差距甚远)，致使上手难度大
  • 没中文文档，英文很差的同窗用起来有点吃力
  • 相对 jsPlumb 不能使用 css 自定义节点样式，彻底经过 js 完成，比较麻烦

通过4个月使用后，确实 mxGraph 帮忙咱们解决了上述问题。但同时也遇到的了一些问题，我会在下一篇文章《mxGraph 入门实例教程》中指出。

参考

• 精读《12 个评估 JS 库你须要关心的事》
• 前端可视化建模技术概览