巨推学院

蚂蚁金服AntV推出全新的图编辑引擎 X6,用来开发ER图、流程图等

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

快速上手

只需要掌握创建画布、添加节点/边、更新节点/边、删除节点/边这几个 API 即可开始使用 X6,并且我们已将 X6 所有特性提取到画布的配置项中,系统默认的配置文件 preset.ts 包含 50 多个配置项 300 多行配置代码,您可以基于 X6 的配置能力快速定制出自己的画布。

蚂蚁金服AntV推出全新的图编辑引擎 X6,用来开发ER图、流程图等


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

易定制节点

X6 预置了一些常用节点样式,创建节点时通过 shape 来指定使用哪种图形来渲染节点即可直接使用,而且绝大部分节点样式和交互都可被自定义。

蚂蚁金服AntV推出全新的图编辑引擎 X6,用来开发ER图、流程图等


然而,实际业务场景中的节点可能要更复杂,预置样式不满足需求?没关系,我们还提供了两种灵活的自定义节点的方式。一种使用 HTMLElement 或 HTML 代码片段来定义节点(使用时将 shape 指定为 html 即可);另一种还可以使用 React 组件来渲染节点(使用 X6 注册节点 API 注册 @antv/x6-react-shape 配合咱家 antd 更是天生一对哦)。

蚂蚁金服AntV推出全新的图编辑引擎 X6,用来开发ER图、流程图等


丰富连线和箭头样式

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

蚂蚁金服AntV推出全新的图编辑引擎 X6,用来开发ER图、流程图等


网格系统与无限画布

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

蚂蚁金服AntV推出全新的图编辑引擎 X6,用来开发ER图、流程图等


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

蚂蚁金服AntV推出全新的图编辑引擎 X6,用来开发ER图、流程图等


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

链接桩与锚点

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

蚂蚁金服AntV推出全新的图编辑引擎 X6,用来开发ER图、流程图等


点选和框选

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

蚂蚁金服AntV推出全新的图编辑引擎 X6,用来开发ER图、流程图等

对齐线

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

蚂蚁金服AntV推出全新的图编辑引擎 X6,用来开发ER图、流程图等


小地图

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

蚂蚁金服AntV推出全新的图编辑引擎 X6,用来开发ER图、流程图等


UI 组件

搭建一个复杂的图编辑应用还需要用到 Menubar、Toolbar、Dropdown、ContextMenu、Splitbox 等 UI 组件,我们在 x6-components 中提供了一些这样的 React 组件,可以搭配 antd 使用

获取地址关注后私信回复“X6”

分享到:
版权声明:本网页内容(包含但不限于文字、图片、视频)由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至zhanzhangtoutiao@163.com举报,一经查实,本站将立刻删除。
投诉

登录后发表评论

已有 1 人参与

评论

相关推荐

李小明

1765篇文章

TA的文章
广告
广告
广告
  • 今日热文
  • 本周热文
  • 本月热文
小编推荐    
猜你想问     更多>>>
热门搜索     更多>>>
返回顶部