公司项目需要用到绘图框架，另一位同事负责绘图部分，使用的是jsPlumb框架。由于人员流动，我后来接手了这部分。项目绘图业务需求越来越复杂，jsPlumb已经不能满足我们的项目，所以我把目光转向了其他绘图框架。这篇文章主要说说我在使用jsPlumb时遇到的问题，以及为什么选择mxGraph。jsPlumbjsPlumb有社区版和付费版。我们使用社区版本。下面提到的问题在付费版本中可能不存在。不稳定无内置导航器（付费版有此功能）无智能布局功能无图层管理无集成截图功能画布无边框自动扩展功能不稳定主要体现在两点还原图形偶尔报一些莫名其妙的秒错，还原连线失败，偶尔线的位置会乱。这可能是我jsPlumb使用不当造成的，也可能是框架本身有问题，最终无法定位问题。不过确实在网上也看到有同学遇到类似不稳定的情况。没有内置导航器。导航器分为两个功能：第一个是放大和缩小，第二个是可以拖动以更改视口的迷你地图。对于放大缩小的功能，我们使用cssscale来缩放整个画布。但是，这种方法的缺点很快就暴露出来了。缩放后，节点的位置会发生变化。至于小地图的实现，无异于重新发明轮子。团队资源有限，当时搁置了这个功能。智能排版产品的一个需求是将用户Excel表格中的数据以图形化的方式展示出来，这就需要智能排版功能，否则程序不知道节点应该放在哪里才好看。实现这个功能需要用到比较复杂的算法，团队资源有限，所以这个功能当时也被搁置了。不做图层管理jsPlumb不做图层管理，导致在绘图过程中无法实现一些想要的图层叠加效果。如果要做，只能自己用z-index来控制，这无疑增加了项目的维护成本。而jsPlumb的target是通过绝对定位附加到节点上的，你不仅需要管理节点的z-index，还需要管理target的z-index。没有集成截图功能。如果用户在绘制过程中进行了改变图形外观的操作，我们需要对当前图形进行截图，然后作为图形的封面同步到服务器。jsPlumb没有内置截图功能，我们使用html2canvas将html转成canvas再转成png，然后发送到服务器。但是html2canvas在截图的时候会卡顿1秒左右，降低了用户体验，并不是我们想要的。Canvas没有边框自动扩展功能。因为jsPlumb采用了svg和html混合的方式，所以节点都是html，canvas的边框自然是程序设置的div容器。如果节点太多或者用户想把节点拖的更远，就需要扩大画布边界，这就成了一个技术问题。当时我们只好把canvas写成5000*5000，有延迟。说了这么多关于jsPlumb的坏话，我并不是要破解这个框架。毕竟jsPlumb的启动次数和npm下载量都是绘图框架中最高的。肯定有它的优点，但是不适合我们的项目。jsPlumb采用svg和html混合的方式。所有节点都是html，所有连接都是由单独的svg节点包裹的路径元素。对于高度自定义的节点样式非常方便。我觉得静态显示的图形非常适合用jsPlumb画图。mxGraph基于上述原因，我在去年底开始技术研究，希望能为我们的项目找到一个合适的绘图框架。目标很明确，我要找的框架可以帮我解决以上所有问题。经过一番谷歌筛选，发现mxGraph和GoJS都可以解决我们的项目问题，因为GoJS是闭源收费的，最终选择了mxGraph。Stabilitydraw.io是一个比较知名的开源绘图网站，是用mxGraph开发的。我也偶尔用这个画图工具，试过BUG。有draw.io作为背书，相信mxGraph的稳定性是可靠的。mxGraph函数官方提供了近90个示例。从这些例子和draw.io中，我可以确认mxGraph可以帮助我实现我想要的功能。导航器和智能布局只是对mxGraph的API调用。mxGraph的画布完全基于svg，自定义节点样式完全通过js完成，比较繁琐。不过这样对mxGraph自己的图层管理还是有好处的。对于开发者来说，管理图分层只是几个API的事情，根本不需要担心z-index。由于canvas完全基于svg，不像jsPlumb用html+svg实现canvas，mxGraph可以导出结构化文档（XML），不再需要使用html2canvas帮助截图，只需要调用几个接口导出当前document并发送到服务器，然后服务器使用Java版本（我们的项目使用Java，mxGraph服务器环境也提供PHP和C#）mxGraph将文档转为图片，解决了截图的问题。canvas边界的扩展不用担心，mxGraph已经帮我们搞定了。此外，draw.io还使用mxGraph实现了复杂的绘图功能。相信即使以后我们的业务有更复杂的扩展，这个框架还是可以应付的。尽管mxGraph社区在stackoverflow上有大约250个相关问题，但大多数问题的答案相对较少。这就是我当时所担心的。兼容性问题该项目对浏览器兼容性比较宽松，没有考虑浏览器兼容性问题。但是，交互需要与iPad兼容。从mxGraph官方的demo中我们知道mxGraph是兼容这方面的，大家可以放心使用。缺点文档不够友好（我觉得远没有达到GoJS文档的水平），导致上手困难。没有中文文档，对于英文不好的同学有点吃力。与jsPlumb相比，不能使用css自定义节点样式。完全通过js完成，比较麻烦经过4个月的使用，mxGraph确实帮我们解决了以上问题。但同时，我也遇到了一些问题，我会在下一篇文章《mxGraph 入门实例教程》中指出。参考精读《12 个评估 JS 库你需要关心的事》前端可视化建模技术概述
