antv x6介绍

X6 是 AntV 旗下的图编辑引擎，方便我们快速搭建 DAG 图、ER 图、流程图等应用。

安装

npm i @antv/x6 --save
yarn add @antv/x6

使用

// 引入
import { Graph } from '@antv/x6';

// 创建容器
<div id="container"></div>

// 准备数据
const data = {
  // 节点
  nodes: [
    {
      id: 'node1', // String，可选，节点的唯一标识
      x: 40,       // Number，必选，节点位置的 x 值
      y: 40,       // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: 'hello', // 文本
      shape: "rect", // 长方形
      angle: 20, // 旋转角度
    },
    {
      id: 'node2', // String，节点的唯一标识
      x: 160,      // Number，必选，节点位置的 x 值
      y: 180,      // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: 'world', // String，节点标签
    },
  ],
  // 边
  edges: [
    {
      source: 'node1', // String，必须，起始节点 id
      target: 'node2', // String，必须，目标节点 id
    },
  ],
};

// 渲染画布
const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
  background: {
    color: '#fffbe6', // 设置画布背景颜色
  },
  grid: {
    size: 10,      // 网格大小 10px
    visible: true, // 渲染网格背景
  },
});

// 渲染节点和边
graph.fromJSON(data)

// 缩放和平移
grape.zoom(0.5) // 缩放
grape.translate(80, 40) // 平移

// 节点（nodes）图形
shape: "rect", // 默认图形

// 节点定制样式
通过 `attrs` 对象来配置节点样式
attrs: {
    body: {
        fill: "#2ECC71",
        stroke: "#fff",
        strokeDasharray: "10,2",
    },
    label: {
        text: "Hello",
        fill: "red",
        fontSize: 13,
    },
},

// 边（edges）图形
shape: 'double-edge'

// 边定制样式
attrs: {
    line: {
        stroke: "orange",
    },
},

画布 graph

画布平移

const graph = new Graph({
  panning: true, // 开启拖拽平移
  // 等同于上面的开启拖拽平移
  panning: {
      enabled: true, // 开启拖拽
      modifiers: 'shift', // 需要结合shift键拖拽
      // 触发画布拖拽的行为，默认为 `['leftMouseDown']`
      eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel'],
  },
})

可以通过以下 API 来启用/禁止画布平移：
    graph.isPannable() // 画布是否可以平移
    graph.enablePanning() // 启用画布平移
    graph.disablePanning() // 禁止画布平移
    graph.togglePanning() // 切换画布平移状态

画布缩放

graph.zoom() // 获取缩放级别
graph.zoom(0.2) // 在原来缩放级别上增加 0.2
graph.zoom(-0.2) // 在原来缩放级别上减少 0.2

画布内容居中

graph.centerContent()

画布导出

导出SVG

import { DataUri } from "@antv/x6";

this.graph.toSVG((dataUri) => {
  // 下载
  DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), '文件名.svg')
}, {})

toSVG 方法还支持第二个参数：
    interface ToSVGOptions {
      preserveDimensions?: boolean | Size // 设置导出svg的尺寸,
      viewBox?: Rectangle.RectangleLike
      copyStyles?: boolean // 是否复制外部样式表中的样式，默认是true
      stylesheet?: string // 自定义样式表
      serializeImages?: boolean
      beforeSerialize?: (this: Graph, svg: SVGSVGElement) => any
    }

导出PNG/JPEG

import { DataUri } from "@antv/x6";

// PNG
this.graph.toPNG((dataUri) => {
  // 下载
  DataUri.downloadDataUri(dataUri, '文件名.png')
})

// JPEG
this.graph.toJPEG((dataUri) => {
  // 下载
  DataUri.downloadDataUri(dataUri, '文件名.jpeg')
})

toPNG/toJPEG 方法第二个参数除了 toSVG 的所有参数外，还支持以下参数：
interface ToImageOptions {
  width?: number // 导出图片的宽度
  height?: number // 导出图片的高度
  backgroundColor?: string // 导出图片的背景色
  padding?: NumberExt.SideOptions // 图片的padding
  quality?: number // 从 0 到 1 的区间内图片的质量。超出取值范围，会使用默认值 0.92
}

销毁画布

graph.dispose()

节点 node

属性名	类型	默认值	描述
x	Number	0	节点位置 x 坐标，单位为 'px'。
y	Number	0	节点位置 y 坐标，单位为 'px'。
width	Number	1	节点宽度，单位为 'px'。
height	Number	1	节点高度，单位为 'px'。
angle	Number	0	节点旋转角度。

创建节点的方式两种

方式一：构造函数

import { Shape } from '@antv/x6'

// 创建节点实现方式1
const rect = new Shape.Rect({
    x: 100,
    y: 200,
    width: 80,
    height: 40,
    angle: 30,
    attrs: {
        body: {
            fill: 'blue',
        },
        label: {
            text: 'Hello',
            fill: 'white',
        },
    },
})

/**
 * 创建节点实现方式2
 * 等同于上面，只是写法不一样，
 * 先创建节点，然后调用节点提供的方法来设置节点的大小、位置、旋转角度、样式等
 * position：设置节点位置
 * resize：设置节点大小
 * rotate：旋转节点
 * attr：设置节点样式
 **/
const rect = new Shape.Rect()
rect.position(100, 200).resize(80, 40).rotate(30).attr({
    body: { fill: 'blue' },
    label: {
        text: 'Hello',
        fill: 'white',
    },
})

// 添加到画布
graph.addNode(rect)

方式二：graph.addNode（推荐使用这种方式）

const rect = graph.addNode({
  shape: 'rect', // 指定使用何种图形，默认值为 'rect'
  x: 100,
  y: 200,
  width: 80,
  height: 40,
  angle: 30,
  attrs: {
    body: { fill: 'blue' },
    label: {
      text: 'Hello',
      fill: 'white',
    },
  },
})

边 edge

属性名	类型	默认值	描述
source	TerminalData	undefined	源节点或起始点
target	TerminalData	undefined	目标节点或目标点
vertices	Point.PointLike[]	undefined	路径点
router	RouterData	undefined	路由
connector	ConnectorData	undefined	连线
labels	Label[]	undefined	标签
defaultLabel	Label	默认标签	默认标签

选项

source/target写法

graph.addEdge({
  source: rect1, // 源节点
  target: rect2, // 目标节点
  
  source: 'rect1', // 源节点 ID
  target: 'rect2', // 目标节点 ID
  
  source: { cell: rect1, port: 'out-port-1' },  // 源节点和链接桩 ID
  target: { cell: 'rect2', port: 'in-port-1' }, // 目标节点 ID 和链接桩 ID
  
  source: 'rect1',            // 源节点 ID
  target: { x: 100, y: 120 }, // 目标点
})

当源/目标是画布上的点时，需要开启 allowBlank 选项（默认已经开启）才能生效
const graph = new Graph({
  connecting: { allowBlank: true }
})

vertices

路径点：边从起始点开始，按顺序经过路径点，最后到达终止点。（一般不用，除非有特殊要求）

graph.addEdge({
  vertices: [
    { x: 100, y: 200 }, 
    { x: 300, y: 120 },
  ],
})

router

路由将对 vertices 进一步处理，并在必要时添加额外的点，然后返回处理后的点。

X6 默认提供了以下几种路由，点击下面的链接查看每种路由的使用方式：

• normal
• orth
• oneSide
• manhattan
• metro
• er
• 自定义路由

graph.addEdge({
  vertices: [
    { x: 100, y: 200 }, 
    { x: 300, y: 120 },
  ],
  router: {
    name: 'orth',
    args: {},
  },
})

使用时只需要提供路由名称 name 和 参数 args 即可，不需要参数 args 时可以使用省略写法
graph.addEdge({
  router: 'orth',
  // 或
  // router: { name: 'orth' }
})

connector

链接器 connector 将路由返回的点加工成渲染边需要的 pathData

X6 默认提供了以下几种连接器，点击下面的链接查看每种连接器的使用方式。

• normal
• rounded
• smooth
• jumpover
• 自定义连接器。

graph.addEdge({
  vertices: [
    { x: 100, y: 200 }, 
    { x: 300, y: 120 },
  ],
  router: 'orth',
  connector: {
    name: 'rounded',
    args: {},
  },
})

使用时只需要提供连接器名称 name 和 参数 args 即可，不需要参数 args 时可以使用省略写法
graph.addEdge({
  connector: 'rounded',
  // 或
  // connector: { name: 'rounded' }
})

labels

标签：用于设置标签文本、位置、样式等

完整的 Label 配置项稍微有点复杂，所以在单独的教程中介绍

const edge = graph.addEdge({
  labels: [ { attrs: { label: { text: 'edge' } },},],
  labels: ['edge'], // 可以设置多个标签，当只设置标签文本是可以简化
  label: 'edge', // 设置单个标签，当只设置标签文本是可以简化
})

也可以调用 edge.setLabels() 和 edge.appendLabel() 来设置和添加标签
// 设置标签
edge.setLabels([{
  attrs: { label: { text: 'edge' } },
}])
// 或
edge.setLabels(['edge'])

// 添加单个标签
edge.appendLabel({
  attrs: { label: { text: 'edge' } },
})
// 或
edge.appendLabel('edge')

使用箭头 Marker

内置箭头

X6 提供了以下几种内置箭头，使用时只需要指定箭头名和参数（可省略）即可。

• block
• classic
• diamond
• cross
• async
• path
• circle
• circlePlus
• ellipse

edge.attr({
  line: {
    sourceMarker: 'block', // 实心箭头
    targetMarker: {
      name: 'ellipse', // 椭圆
      rx: 10, // 椭圆箭头的 x 半径
      ry: 6,  // 椭圆箭头的 y 半径
    },
  },
})

自定义箭头

我们也可以通过 tagName 指定的 SVG 元素来渲染箭头

edge.attr({
  line: {
    sourceMarker: {
      tagName: 'path',
      d: 'M 20 -10 0 0 20 10 Z',
    },
    targetMarker: {
      tagName: 'path',
      fill: 'yellow',  // 使用自定义填充色
      stroke: 'green', // 使用自定义边框色
      strokeWidth: 2,
      d: 'M 20 -10 0 0 20 10 Z',
    },
  },
})

创建边的方式两种

方式一：构造函数

import { Shape } from '@antv/x6'

// 实现方式1
const edge = new Shape.Edge({
  source: rect1, // 源节点
  target: rect2, // 目标节点
})

// 实现方式2
const edge = new Shape.Edge()
edge.setSource(rect1).setTarget(rect2)

// 添加到画布
graph.addEdge(edge)

方式二：graph.addEdge（推荐使用这种方式）

const rect = graph.addEdge({
  shape: 'edge', // 指定使用何种图形，默认值为 'edge'
  source: rect1,
  target: rect2,
})

结束，欢迎指出需要改动的地方，谢谢