react+antvX6制作可编辑图表4——Cell,Node

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

前清提要：  上一期我们讲了antv-X6中的拖拽组件Dnd、Stencil，这一期我们讲一讲如何创建基础图形，节点和边。

在创建节点和边时，我们肯定会需要使用到官方提供的基础图形，如 Rect、Edge、Circle 等，这些图形最终都有共同的基类 Cell，定义了节点和边共同属性和方法，如属性样式、可见性、业务数据等，并且在实例化、定制样式、配置默认选项等方面具有相同的行为。详细内容参见antvX6中文官网基类 Cell。示例：

基类 Cell

Cell就是用来创建基础图形的，可以设置图形、Svg、文字、颜色，创建完成后也可以在实例上直接修改样式，(例如：rect.attr('label/text', 'hello')，调用实例上的 attr() 方法来修改节点属性样式)。

const rect = new Shape.Rect({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  attrs: { 
    body: {
      fill: '#2ECC71',
      stroke: '#000',
    },
    label: {
      text: 'rect',
      fill: '#333',
      fontSize: 13,
    },
  },
})

如上所示就是最基本的创建矩形方式，具体你想要改成什么样子，可以在官网查询对应属性进行修改。

节点 Node

cell可以理解为向我们提供了各式各样的图形和定制图形样式的属性，如果将cell放置到画布上，增加了坐标信息等，就变成了节点Node。Node继承cell的选项，还支持以下选项：

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

接下来我们就一起来看看，如何使用这些选项来创建节点。

方式一：构造函数

我们同样可以直接使用在 X6 的 Shape 命名空间中内置了一些基础节点，如 Rect、Circle、Ellipse 等，可以使用这些节点的构造函数来创建节点。

import { Shape } from '@antv/x6'

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

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

这里我们创建了一个矩形节点，分别通过 x 和 y 选项指定了节点的位置，通过 width 和 height 选项指定了节点的大小，通过 angle 指定了节点的旋转角度，通过 attrs 选项指定了节点样式，然后通过 graph.addNode 方法将节点添加到画布，节点添加到画布后将触发画布重新渲染，最后节点被渲染到画布中。

我们也可以先创建节点，然后调用节点提供的方法来设置节点的大小、位置、旋转角度、样式等。

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

另外，我们还可以使用 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',
    },
  },
})

这里的关键是使用 shape 来指定节点图形，默认值为 'rect'，其他选项与使用节点构造函数创建节点的选项一致。在 X6 内部，我们通过 shape 指定的图形找到对应的构造函数来初始化节点，并将其添加到画布。内置节点构造函数与 shape 名称对应关系参考此表。除了使用内置节点，我们还可以使用注册的自定义节点，详情请参考自定义节点教程。

定制样式 Attrs

例如 Shape.Rect 节点定义了 'body'（代表 <rect> 元素）和 'label'（代表 <text> 元素）两个选择器。我们在创建矩形节点时可以像下面这样定义节点样式。

const rect = new Shape.Rect({
  x: 100,
  y: 40,
  width: 100,
  height: 40,
  attrs: { 
    body: {
      fill: '#2ECC71', // 背景颜色
      stroke: '#000',  // 边框颜色
    },
    label: {
      text: 'rect',    // 文本
      fill: '#333',    // 文字颜色
      fontSize: 13,    // 文字大小
    },
  },
})