logoCreated with Sketch.

X6

节点 Node

阅读时间约 2 分钟

在快速上手案例中，我们通过 JSON 数据来快速添加两个矩形节点和一条边到画布中，并简单介绍了如何定制节点样式。接下来我们将学习更多创建节点的方式，并了解创建节点的基础选项。

创建节点

选项

节点都有共同的基类 Cell，除了从 Cell 继承的选项外，还支持以下选项。

属性名类型默认值描述
xNumber0节点位置 x 坐标，单位为 'px'。
yNumber0节点位置 y 坐标，单位为 'px'。
widthNumber1节点宽度，单位为 'px'。
heightNumber1节点高度，单位为 'px'。
angleNumber0节点旋转角度。

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

方式一：构造函数

我们在 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

我们在之前的教程中介绍了如何通过 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,    // 文字大小
    },
  },
})