AntV 推出全新的图编辑引擎 X6，让大家久等了

X6 是蚂蚁金服 AntV 旗下的图编辑引擎，X 象形图编辑场景的关系连接，同时 X6 又是 G6 的孪生兄弟，因此沿用了 G6 中的 6，深究一下，6 源于《六度分隔理论》，表达了咱们对关系数据、关系网络的敬畏和着迷。

X6 脱胎于蚂蚁实际的业务场景，在此基础上，咱们完善了图编辑场景的经常使用扩展，如小地图、网格系统、对齐线、框选、redo/undo等，内置了图编辑场景的常规交互和设计，如群组、连接桩、节点缩放、旋转、连线交互，并提供了基于 HTML 和 React 低成本定制节点能力。

特性预览

快速上手

只须要掌握建立画布、添加节点/边、更新节点/边、删除节点/边这几个 API 便可开始使用 X6，而且咱们已将 X6 全部特性提取到画布的配置项中，系统默认的配置文件 preset.ts  包含 50 多个配置项 300 多行配置代码，您能够基于 X6 的配置能力快速定制出本身的画布。

快速定制画布

节点、连线与画布，图编辑核心能力

易定制节点

X6 预置了一些经常使用节点样式，建立节点时经过 shape 来指定使用哪一种图形来渲染节点便可直接使用，并且绝大部分节点样式和交互均可被自定义。

内置节点和自定义样式

然而，实际业务场景中的节点可能要更复杂，预置样式不知足需求？不要紧，咱们还提供了两种灵活的自定义节点的方式。一种使用 HTMLElement 或 HTML 代码片断来定义节点（使用时将 shape 指定为 html 便可）；另外一种还能够使用 React 组件来渲染节点（使用 X6 注册节点 API 注册 @antv/x6-react-shape 配合咱家 antd 更是天生一对哦）。

使用 HTML 和 React 渲染节点

丰富连线和箭头样式

内置了直线、曲线、拐线、正交线、关系线、循环线等常见连线样式和 10 多种箭头样式。

内置连线和箭头

网格系统与无限画布

网格是节点在画布中定位时最小像素单元，例如当节点的位置是 {x: 12, y: 18} 网格大小为 5 时，那么节点渲染到画布的实际位置将是 {x:10, y: 20}。X6 默认提供了 line 和 dot 两种风格的网格，而且支持自定义网格大小和颜色。

灵活易用的网格系统

将 infinite 选项设置为 true 开启无限大画布，当节点/边移动到画布边缘时画布会自动扩充画布大小。

无限画布

交互能力与配套组件，图编辑不可或缺

连接桩与锚点

经过父子节点和 isPort 选项能够将指定的 cell 设置为连接桩，使其具有可链接性。锚点是沿节点边框布局的固定链接点，内置矩形/圆形/椭圆/三角形等边框布局，支持定制锚点的数量和位置，当鼠标 hover 到节点是才显示锚点，在锚点上按下鼠标能够触发连线。

连接桩和锚点

点选和框选

点击节点/边时选中节点，按下 Cmd/Ctrl 连续点击能够同时选中多个节点，经过 rubberband  配置项来开启框选能力，同时支持 selectionPreview 选项配置选中节点/边的样式。

点选和框选

对齐线

对齐线是移动节点排版的辅助工具，默认禁用，能够经过 guide 配置项开启和定制对齐线的样式。

对齐线

小地图

支持渲染粒度定制和样式定制，便是否在小地图中渲染节点/边，默认只渲染节点。在小地图中并不会绘制完整的节点，而是用一个色块代替节点，色块颜色支持自定义。

小地图

UI 组件

搭建一个复杂的图编辑应用还须要用到 Menubar、Toolbar、Dropdown、ContextMenu、Splitbox 等 UI 组件，咱们在 x6-components 中提供了一些这样的 React 组件，能够搭配 antd 使用。

最后

很是感谢你的耐心阅读，X6 仍是个新生儿，虽然内测版早已在内部数据研发(ER图)、运维中台(流程图)等多个产品应用上线，但相信还有不少问题有待完善，欢迎在 GitHub 给咱们反馈问题。若是你对 X6 或者 AntV 旗下的其余产品感兴趣，能够经过如下渠道关注咱们：

• GitHub：github.com/antvis/x6
• AntV 官网：antv.vision
• AntV GitHub: github.com/antvis

原文连接：www.yuque.com/antv/blog/x…