软件简介

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 默认提供了 linedot 两种风格的网格,并且支持自定义网格大小和颜色。

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

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

链接桩与锚点

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

点选和框选

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

对齐线

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

小地图

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

UI 组件

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

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (1)

加载中
不错
前天 14:51
回复
举报
更多评论
发表于大前端专区
03/16 12:01

AntV 推出全新的图编辑引擎 X6

X6 是蚂蚁金服 AntV 旗下的图编辑引擎,X 象形图编辑场景的关系链接,同时 X6 又是 G6 的孪生兄弟,所以沿用了 G6 中的 6,深究一下,6 源于《六度分隔理论》,表达了我们对关系数据、关系网络的敬畏和着迷。 X6 脱胎于蚂蚁实际的业务场景,在此基础上,我们完善了图编辑场景的常用扩展,如小地图、网格系统、对齐线、框...

11
32
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2015/01/29 15:58

新版的 CorelDraw X6

超强Coreldraw x6增强插件合集下载。自从cdr x6发布以来,一直有网友询问支持CorelDraw x6的插件包何时能出来,注册是随着coreldraw x6中文正式版的推出,更多的网友希望也能跟着发布coreldraw x6增强插件。为了满足大家的期望,北极鱼抽空在cdr x5插件包的基础上重新整理制作了一下,去除部分在coreldraw x6中已经不能使...

0
0
发表于开发技能专区
07/11 18:07

灵魂拷问 x6:微服务到底靠谱不?

最近看到一个新闻,说是内容是 “IBM、甲骨文、CNCF 就谷歌对 Istio 治理的处理提出抗议”。相信很多小伙伴看了以后,针对 Istio、微服务都有一丝疑虑,接下来我们用灵魂拷问的方式,来分析相关的问题。本文仅代表...

34
57
发表于大前端专区
03/12 16:10

蚂蚁金服 AntV 推出全新的图编辑引擎 X6,让你们久等了

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

0
1
发表了博客
2019/02/28 10:11

windows server r2 安装vs2017 更新补丁Windows8.1-KB2919355-x6

方法一: 点击vs2017安装包后提示需要更新Windows8.1-KB2919355-x64补丁 点击链接进入全部下载后查看官方安装顺序为 注意 必须按照以下顺序安装更新:clearcompressionflag.exe、KB2919355、KB2932046、KB2959977、KB2937592、KB2938439 和 KB2934018。 可是首先安装KB2919355就提示了不适用无法安装的提示 经过查阅后发...

0
0
发表了博客
2018/07/05 15:03

IBM X3850 X6 raid组添加硬盘扩容操作步骤+linux服务器操作

服务器操作参考PDF 链接:https://pan.baidu.com/s/1bYI3qJ_RntqNZ4ehP9AIiQ 密码:31wn (注意加硬盘的时候,最好机器关机断电之后再插盘)我这边重构的时候把raid1改成了raid5,没有问题。 重构100%之后,进linux系统里操作(分区大于2T,用parted): parted网上都有,我这边也引用别人操作,会用fdisk,基本上都能看...

0
0
10/19 14:47

Alien Skin Exposure X6永久激活汉化补丁胶片滤镜模拟软件

Exposure是用于创意照片编辑的最佳图像编辑器。Exposure结合了专业级照片调整,庞大的华丽照片外观库以及高效的设计,使其使用起来很愉悦。新的自动调整功能可简化您的工作流程,并使您进入创意区。 Exposure特征...

0
0
2018/03/27 14:38

CDR都特价了,你还用破解版?

目前,CDR X6特价活动,从18的年的元旦一直持续到现在,真可谓是痛快淋漓,大喜若狂,但是,似乎好像是....这么强有力的活动马上就要告一段落了,因为限量1000 套的抢购要卖!完!了!难不难过,痛不痛心,呜呜呜~ 如果你错过了2399,又错过了3200,那么这次的CDR X6 2799 一定要抓住了,CorelDRAW 在业界的口碑一直很不...

0
0
发表了博客
2014/11/14 09:35

ARMv8(aarch64)页表建立过程详细分析

目录 文件修订记录...2 目录...3 1ARMv8存储管理...4 1.1Aarch64 Linux中的内存布局... 4 1.2AArch64的虚拟地址格式...4 1.2.14K页时的虚拟地址...4 1.2.264K页时的虚拟地址...5 2head.S页表建立过程分析...6 2.1页表建立函数__create_page_tables.6 2.1.1pgtbl x25,x26, x24分析... 7 2.1.2MM_MMUFLAGS解释...8 2.1.3c...

0
0
06/11 19:42

Unix到开放平台还可以来的更快点吗?

“互联网+”是一种本来就有的现象,李总理给这种现象起了个总结性的名字,在政策语言中添加了互联网这个对象,掀起一波互联网热。“互联网化”被越来越多的人视为是企业竞争力的一部分,关系到企业的市场快速响应...

0
0
发表于数据库专区
2018/08/14 15:10

Duang Duang Duang,CorelDRAW X7最新活动,这个你必须得加入!

一年一度的七夕又到来了,这不很多的单身狗朋友们都已经自备好了狗粮,准备在家里宅上一天呢? 开个玩笑今天小编就为各位带来了 一个劲爆大消息... Deng/deng/deng/deng..就是备受万众瞩目的 CorelDRAW官方又双叒...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
1 评论
118 收藏
分享
返回顶部
顶部