likes
comments
collection
share

🖌浅谈web画布引擎的那些事儿~

作者站长头像
站长
· 阅读数 18

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

🖌浅谈web画布引擎的那些事儿~

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

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

  • Drawio：33.1k⭐
  • Xflow：364⭐
  • LogicFlow：3.8k⭐

🖌浅谈web画布引擎的那些事儿~

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

🖌浅谈web画布引擎的那些事儿~

正文

Drawio

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

🖌浅谈web画布引擎的那些事儿~

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

  • 支持的图类型非常多，包括且不限于
    • 流程图
    • ER图
    • UML图
    • BPMN图
    • 泳道图
    • 思维导图
  • 支持 任意多阶 的贝塞尔曲线
  • 支持 sketch风格 的绘制，这个是我个人很喜欢的一点，颜值即正义！
  • 支持图形的任意变换
  • 支持插入节点组

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

🖌浅谈web画布引擎的那些事儿~

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

🖌浅谈web画布引擎的那些事儿~

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

🖌浅谈web画布引擎的那些事儿~

Xflow

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

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

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

  • 支持使用 react组件 来开发节点，从而可以实现非常复杂的节点
  • 支持在连线上使用 react组件 开发自定义节点，从而实现各种交互设计

🖌浅谈web画布引擎的那些事儿~

LogicFlow

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

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

  • 基础画布能力
  • 拓展能力

🖌浅谈web画布引擎的那些事儿~

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

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

🖌浅谈web画布引擎的那些事儿~

基础画布能力

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

  • 图形的绘制能力：基于 SVG 来绘制形状各异的节点和线，并提供了基础的节点（矩形、圆形、多边形等）和线（直线、折线、曲线）
  • 各类交互能力，让图动起来：根据节点、线、画布的各类鼠标事件（hover、点击、拖拽等）做出反应。比如节点拖拽、拖拽创建边、线的调整、双击节点编辑文本等
  • 提升编辑效率的能力：提供网格、对齐线，上一步、下一步，键盘快捷键，画布放大缩小等配套能力，帮助用户提升编辑效率

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

拓展能力

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

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

🖌浅谈web画布引擎的那些事儿~

🖌浅谈web画布引擎的那些事儿~

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

import LogicFlow from '@logicflow/core';
import BpmnAdapter from '@logicflow/extension/lib/BpmnAdapter';

LogicFlow.use(BpmnAdapter);

结语

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

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