我正在参加「掘金·启航计划」

web画布引擎，我想对于很多人肯定不陌生，或许用过，或许听过，那么如果当你所在的项目有类似绘图的需求时，你是否有完整的解决方案呢？

其实在开源社区里，早就提供了很多成熟完善的方案供我们选择，开箱即用，十分方便

目前我了解的比较流行的画布引擎有如下几个

下面依次介绍它们，废话不多说，开搞！

Drawio 其实是一款历史比较长的画布引擎，它是基于 mxgraph 进行开发，而mxgraph在2005年就推出了，并且有意思的一点是，在drawio的官网里，还有这么一句话："Diagram files created in 2005 will load in the app today"，翻译过来就是 2005年在mxgraph里创建的图表，如今在drawio里依旧可用。这里其实就是想表达它的引擎非常稳定成熟，有点自卖自夸的味道

Drawio的功能也确实非常强大，我列几个比较突出的点

虽然Drawio功能非常强大，但是由于其历史过于久远，导致源码部分并没有使用模块化开发，最终造成源码的代码量极其巨大，粗略估计下来，前端代码至少有上千个文件，因此如果想做二开，难度是极其大的，个人不建议基于Drawio进行二开

在Drawio里，所有元素都是通过不同的 类 进行管理，比如侧边栏有sidebar，菜单栏有menubar，画布有mxgraph，当然它的类并不是es6里的 class 来写的，而是基于 构造函数 来构建的

对于边和节点，都是一个 mxCell 的实例，通过 vertex 属性区别，下面给出各种类的交互图例

Xflow是由蚂蚁集团的数据可视化团队打造的一款基于 X6 图编辑引擎、面向 React 技术栈用户的专业图编辑应用级解决方案, 帮助轻松开发复杂的图编辑应用

类比antd体系, X6 是图编辑场景的 antd, 提供图编辑的各种原子能力。而 XFlow 是图编辑场景的 ProComponent, 通过 App 扩展系统/状态管理/命令模式来实现对 X6 的原子能力的组合封装, 最终实现应用级场景的开箱即用

对我而言，它比较有特色的点有两个

LogicFlow 是由 滴滴体验平台 研发的一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制

首先我想聊聊LogicFlow对于整体功能的划分，通过对官网以及源码的阅读，LogicFlow功能整体分为两部分：

为啥要这样划分，我这里援引官方的解释：我们需要做一个能支持各系统平滑迁移的流程可视化库，需要这个库足够的灵活，视觉上也要满足个各系统自己的风格，而且最好是流程图上的各种功能都可以自按需使用

因此“灵活性”是LogicFlow追求的目标，为了实现这个目标，LogicFlow使用了插件机制，而要实现插件机制，LogicFlow在功能的划分上就必须将基础能力与拓展能力分开，在代码层面也是这么做的，下面进行详细说明

这部分提供了画布编辑的核心功能，列举如下

基础能力只包含画布本身的功能，而像菜单栏，属性编辑栏，小地图等功能都得通过插件的方式进行引入

根据不同业务场景的需要，选择符合需求的插件，可以大大提高其能力边界

官方已经根据常见的业务场景，实现了部分插件，列举如下

要想使用一个插件也非常简单，下面给出示例

我相信通过本文的阅读，当你以后遇到画布引擎技术的选型时，一定不会迷茫，因为一切都在掌控之中了😎

都看到这里啦，能不能求个免费的赞呀😉，你们的支持才是我最大的动力！