Web前端绘图技术漫谈 新一代图形编辑框架在IT架构管理系统中的的落地与实践

伴随着社会的进步，互联网技术的发展对人们的生活方式产生了深远的影响。在这一两年的疫情当中，人们已经习惯了线上化的办公方式。如今很多软件都提供了网页版，如office、photoshop、微信等，我们已经可以使用浏览器进行简单的日常办公。人们操作习惯变迁的背后是Web图形技术的演进，本文将主要介绍Web前端绘图技术的前世今生以及新一代图形编辑框架在光大银行IT架构管理系统中的落地与实践。

前端图形技术的历史演进

我们抛开那些技术发展历程中的细枝末节，Web图形技术的发展大致可分为两个阶段，Flash和HTML5。曾几何时，大多数网站的banner广告，都是由Flash制作。大家是否还记得曾经非常流行的Flash小游戏呢？

随着移动互联网的兴起，Flash发展的脚步逐步慢了下来。Flash的底层代码越来越重，导致其运行速度已经逐渐跟不上移动互联网发展的潮流。且因为Flash破坏了浏览器本身的沙箱隔离机制，各种安全漏洞也越来越多。随着苹果宣布封杀Flash，各大厂商都开始逐步放弃Flash技术，一个时代宣告结束。

HTML5本质上是一个标准，随着HTML5对流媒体和绘图画布（Canvas）的支持，再加上nodejs的兴起，如今的前端开发，也已经基本完成统一，我们使用HTML+CSS+JavaScript已经完成各种复杂的流媒体播放、图形渲染和操作交互。

H5时代的两种主流前端绘图技术

当前主流的Web 2D绘图技术主要有两种：SVG和Canvas。

SVG是一种使用XML描述2D图形的语言，全称是可缩放矢量图（Scalable Vector Graphics）。SVG有两个特点，一是SVG绘制的是矢量图形，不依赖于终端设备的像素，可以随意放大缩小但是不会失真；二是SVG在HTML5中每一个图形都会被渲染成一个DOM，我们可以直接操作DOM元素来实现交互。SVG通过XML标签来定义各种形状和线段，比如下列代码：

实现的效果如下：

我们通过定义一个矩形，通过定义一个圆形，并可以通过fill属性设置颜色。一些复杂的图形，本质上也是基础图形的组合。

Canvas 是在HTML5中新增的标签，用于在网页实时生成图像，Canvas是逐像素进行渲染的。Canvas 的渲染效率更高，缺点是Canvas 在 HTML 层面上是一个独立的画布元素，所以所有的绘制内容都是在内部通过绘图指令来完成的，绘制出的图形对于浏览器来说，只是 Canvas 中的一个个像素点，我们很难直接抽取其中的图形对象进行操作。如下列代码所示：

实现的效果如下：

Canvas 标签本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

一般来说，绘制静态的设计图，示意图建议使用SVG，绘制动画，大规模动态图表的时候建议使用Canvas。同时SVG的开发难度较低，因为它所见即所得，所有的元素都暴露在前端；而Canvas因为画布内渲染过程不可见，调试困难，所以开发难度要大一些。

IT 架构管理系统架构设计模块

光大银行IT 架构管理系统（简称AMS）服务于总、分行信息科技人员，为IT 架构管控相关工作提供电子化支持。AMS的在线架构设计模块可以为架构师提供完善的架构设计功能。从功能上来说，AMS能够提供基本的图形形状，矩形、圆形、线段等；预设了大量的基础节点，如网络设备、应用节点、流程节点等；同时还提供了一些基本的辅助工具，如小地图、放大缩小、对齐等。新一代的架构设计工具如下图所示：

图编辑框架技术选型

AMS老系统基于C/S架构来实现架构设计功能。经过技术调研，我们判断目前的前端技术已经可以实现架构设计功能的Web化，所以本次重构，我们主要考虑基于B/S架构进行技术选型。考虑到如果使用原生的SVG或Canvas编写一款在线设计工具，工作量比较大，现在市面上有很多经过封装的图编辑框架。在做AMS在线设计模块的技术选型时，我们对比了市面上主流的一些图编辑类框架，大致对比结果如下：

Joint、jsplumb、mxGraph都是国外比较老牌的图形编辑框架，Joint、jsplumb都已经走商业化发展路线，社区版支持力度越来越弱。mxGraph比较古老了，社区不太活跃。Draw.io是非常好的一体化解决方案，但是它是一个完整的平台，不是一个单纯的前端框架，相对而言太重了，维护起来也非常困难。AntV X6由蚂蚁金服开源，能够覆盖本系统需要的所有模型，开源社区样例丰富，社区活跃，有官方的支持群，数据格式基于json，无其他额外依赖，许可证为MIT也无风险。所以最终讨论我们将基于AntV X6来实现架构设计工具。

AntV X6基础架构介绍

X6整体是基于MVVM的架构进行设计的，对外整体暴露Graph的类，其中的Node、Edge、Port等都有对外暴露的方法。架构图如下：

Graph类提供了整体所有结构的汇总，暴露给用户。Graph 是图的载体，它包含了图上的所有元素（节点、边等），同时挂载了图的相关操作（如交互监听、元素操作、渲染等）。

Model层的三个核心类，节点Node、边Edge、连接桩Port用来定义图的形状样式和关联关系。

X6在项目中的实际用法我们会在下一节用实例展示，下面着重介绍几个X6的高级特性：

布局

当数据有一定层级结构或先后顺序时，经常会用到层次布局来展现，一般对应的数据结构是DAG（Directed Acyclic Graph，即有向无环图）。图编辑工具除了需要提供最基础的对齐功能之外，对于一些特殊的图形，还需要具备自动布局的能力。在可视化领域中常见的布局有树形布局、力导布局、同心圆布局、网格布局等。

对于图设计领域，树形和网格布局是我们最常用到的，其他的布局形式，可能更多的出现在图分析领域。

X6提供了四种基础的布局：

我们可以使用Layout的几个实现类，如gridLayout、circularLayout等实现自动布局。

动画

SVG的动画能力一直是个弱势，不过根据我们的使用场景，在图设计领域，我们也不需要太复杂的动画。X6可以实现基于CSS的Transition动画，来将指定属性值通过平滑动画的形式过渡到目标值；还可以通过SVG SMIL Animation，来实现元素动画和路径动画，如精准定义元素的运动路径、淡入或淡出效果以及伸缩、旋转或改变颜色等变化等。

性能

SVG对像素不敏感，当我们放大元素的大小时，对渲染性能并不会造成大的影响。SVG的最大问题是他的每一个节点，都是一个独立的HTML元素，这会对性能造成很大影响，当节点数超过1000时，就不推荐使用SVG了。所以一般数据分析类的工具，大多是通过Canvas进行渲染的。当数据量超过5万时，我们就需要使用Canvas的GPU渲染，或者直接使用WebGL这种完全基于GPU的方案。

当然，我们也可以使用一些手段来改进SVG的性能，如X6就使用渐进渲染模式来实现节点的异步渲染。首次渲染时，优先渲染同步属性，等到浏览器空闲时渲染异步属性。

AntV X6项目落地

在IT架构管理系统中，我们可以使用架构设计工具，绘制包括系统环境模型、系统上下文模型、应用逻辑部署模型、应用物理部署模型、应用功能逻辑架构模型等基础的架构设计图，还可以绘制业务流程图、思维导图等辅助设计图。

不同的图形，本质上是节点、边、布局、工具的组合。系统环境模型、系统上下文模型主要是描述系统间的关联关系，所以这里我们需要实现模型的相互嵌套和引用；应用逻辑部署模型、应用物理部署模型描绘的是网络拓扑关系，需要定制网络拓节点，关联网络安全域，并通过X6中的群组工具实现同一个网络域内服务器的自动分组；流程图则需要按照BPMN规范来定制流程节点，如事件、活动、网关等，并且我们可以添加动画效果来让流程图动起来，更清晰的看出流程走向；思维导图里最重要的就是需要实现自动布局，他本质上是一个树形结构，多增加一个下级节点，需要实现树结构的再平衡，X6的树形布局可以辅助我们实现这个功能。

我们如何用数据描述一个设计模型？

下面以AMS中一个的架构设计图为例，描述下图形渲染的原理，如下图所示：

该图中，有六个节点（背景的白色矩形也属于一个节点），四条线段，描述了各个节点之间的关联。

在AntV X6中，描述一个图形，大致可以分为node和edge两部分，node描述了节点，edge描述了节点之间的关联关系。X6的数据结构如下：

先看一下node的数据，如下：

在X6中，一个node就是一个基础的SVG图形，我们通过xlink属性来指定。Node的一些基本属性有位置position，描述了节点的平面xy坐标；size，描述了长和宽；zIndex描述了节点的层级；ports描述了节点的连接桩，用于节点和节点之间关联。

下面我们再看下edge节点，具体数据格式如下：

以最普通的直线为例，它描述了源节点到目的节点的关系，source和target分别指向源节点和目的节点的连接桩（port），通过attr里的属性，来指定直线的颜色和箭头类型。如果我们想绘制曲线，我们可以在直线中间添加路径点（vertices，xy坐标数组），通过路径点的位置和连接器的类型，来定制线段。常用的连接器有normal和rounded，normal即折线，直接连接各个路线点来绘制线段；rounded即圆角曲线，通过路径点和半径来绘制曲线，其基本的原理是数学上的“贝塞尔曲线”，是在二维图形中描述曲线最常见的一种工具。

至此，通过节点和边的组合，一个基本的架构设计图就描绘出来了。

总结

随着新一代架构设计工具的落地，我们不再需要安装笨重的客户端。Web应用更加轻量化，数据存储在云端，用户可以在多终端之间自由切换。工具的线上化打破了信息孤岛，数据统一存储集中展现，用户开箱即用，操作体验全面提升，也大大降低了我们的管理难度。

以上是我们在建设IT架构管理系统的过程中，对Web绘图技术的总结和应用。回顾Web图形技术的发展历史，从某个角度看，就是抽象层次不断提高的一个过程。开源框架为我们提供了很多便利，有些时候我们也需要探索其本质，这样才能更好的解决问题，推陈出新、拔新领异。

作者 | 王月康

视觉 | 王朋玉

统筹 | 郑 洁