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 更是天生一对哦)。
丰富连线和箭头样式
内置了直线、曲线、拐线、正交线、关系线、循环线等常见连线样式和 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:https://github.com/antvis/x6
- AntV 官网:https://antv.vision
- AntV GitHub: https://github.com/antvis
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
最近你幸福吗? —— 开源中国发布开发工程师幸福感调研
最近四周以来,全国疫情快速好转,不知道各位工程师们是否陆续返工了呢?这段时间的居家(远程)办公不知道大家的体验怎么样呢? 为了协助行业提高工程能力,开源中国发起此次《开发工程师幸福感调研》(3月16日至3月31日) 点我参与幸福感调研 在这段特殊时期里,大家对于“幸福”是否有了新的理解?期待大家分享这段时期的相关感受哦,比如对生活上、事业上的“容灾储备”是否有了新的思考?你觉得有哪些好的思路、措施可以分享给各位开发者呢?抑或有哪些可以提升幸福感、提升生产力的方式、方法、工具可以分享给大家呢?欢迎在此跟帖分享哦! 获得大家高赞的精彩分享,我们将给予奖品上的支持。同时也将在调研结束后从填写合格的问卷中随机抽取 20 名小伙伴送上奖励。(请注意在问卷中登记邮箱地址哦) 参与规则: 1. 点击>>>填写调研问卷; 2.参与活动的小伙伴请在跟帖分享你的心得、工具。征文截止至 2020 年 4 月 10 日。 活动礼品: 1. 启发奖:Gitee T恤,5 位,得赞量 TOP 5 的用户。 2. 幸运奖:OSC开源内裤,20位,从填写合格的问卷调查中随机抽取。
- 下一篇
kubernetes中集成istio出现拉取配置中心数据失败导致服务启动失败
由于在k8s使用了grpc,所以这里我们集成istio来实现http2的自动发现以及负载均衡,但是随着节点增加,istio之前同步配置时间边长导致第一次启动时,服务启动拉取配置时istio却还没初始化好相关配置,而导致第一次启动失败,错误如下 这里有几种方案 让服务启动时先暂停5s,再加载配置信息 加载配置失败一直重试知道成功 修改istio与业务pod启动时间间隔 修改dockerfile 检查istio是否启动,启动成功后再启动业务pod 经过评估,方案1需要代码侵入,还是无法完全解决问题, 方案2 也是需要修改业务代码,很多业务都得跟着修改,改动大 方案3 这个在最新版本中的k8s有这个功能,升级有风险 方案4 侵入式小 最后选择方案四,也参考了相关资料 https://github.com/istio/istio/issues/16222 最终需要修改dockerfile来解决,并且将检查istio健康状况改成了检查配置中心是否可用 ENTRYPOINT ["/bin/sh","-c"] CMD ["until curl --head 'http://config-center...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS7设置SWAP分区,小内存服务器的救世主
- Docker快速安装Oracle11G,搭建oracle11g学习环境