logoCreated with Sketch.

F6

Rect

阅读时间约 3 分钟

F6 内置了 rect 节点，其默认样式如下。标签文本位于矩形中央。
img

使用方法

如 内置节点 一节所示，配置节点的方式有三种：实例化图时全局配置，在数据中动态配置，使用 graph.node(nodeFn) 函数配置。这几种配置方法可以同时使用，优先级：

使用 graph.node(nodeFn) 配置 > 数据中动态配置 > 实例化图时全局配置

⚠️ 注意: 除 id、label 应当配置到每个节点数据中外，其余的 节点的通用属性 以及各个节点类型的特有属性（见内置节点类型）均支持这三种配置方式。

1 实例化图时全局配置

用户在实例化 Graph 时候可以通过 defaultNode 指定 type 为 'rect'，即可使用 rect 节点。

const graph = new F6.Graph({
  ...
  width: 800,
  height: 600,
  defaultNode: {
    type: 'rect',
    // 其他配置
  },
});

2 在数据中动态配置

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

const data = {
  nodes: [{
	  id: 'node0',
    type: 'rect',
    ... // 其他配置
    },
    ... // 其他节点
  ],
  edges: [
    ... // 边
  ]
};

配置项说明

rect 节点支持 节点通用配置，下表对部分属性进行解释。对于 Object 类型的配置项将在后面有详细讲解：

名称含义类型备注
sizerect 的宽高NumberArraysize 为数组时：第一个值表示宽度，第二个表示高度；
size 为一个数值时：表示宽高相等
stylerect 默认样式ObjectCanvas 支持的属性
label标签文本内容String
labelCfg标签配置项Object
stateStyles各状态下的样式Object只对 keyShape 起作用
linkPoints视觉上的四个锚点Object默认不显示，应与 anchorPoints 配合使用。二者区别请看 linkPoints

样式属性 style

Object 类型。支持 节点通用样式。通过 style 配置来修改 rect 的填充色、边框颜色、阴影等属性。

名称含义类型备注
radius圆角半径Number默认为直角矩形
stroke描边颜色String
lineWidth描边粗细Number默认为 1
fill填充色String
fillOpacity透明度Number默认为 1

下面代码演示在实例化图时全局配置方法中配置 style，使之达到如下图效果。
img

const data = {
  nodes: [
    {
      x: 100,
      y: 100,
      type: 'rect',
      label: 'rect',
    },
  ],
};

const graph = new F6.Graph({
  ...
  width: 500,
  height: 300,
  defaultNode: {
    // type: 'rect', // 在数据中已经指定了 type，这里无需再次指定
    style: {
      fill: '#bae637',
      stroke: '#eaff8f',
      lineWidth: 5,
      radius: 10,
    },
  },
});
graph.data(data);
graph.render();

标签文本配置 labelCfg

Object 类型。通过 labelCfg 配置标签文本。支持 节点通用标签配置。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了  labelCfg  配置项进行文本的配置，使之达到如下图效果。
img

const data = {
  // ... data 内容
};
const graph = new F6.Graph({
  // ... 图的其他配置
  defaultNode: {
    // ... 其他配置
    labelCfg: {
      style: {
        fill: '#9254de',
        fontSize: 18,
      },
      position: 'bottom',
    },
  },
});
// ...

linkPoints

Object 类型。通过配置 linkPoints ，可以指定矩形周围「上、下、左、右」四个小圆点。

⚠️ 注意: 区分于 anchorPoints： anchorPoints 是真正用于指定该节点相关边的连入位置的「数组」，见 anchorPoints；而 linkPoints 仅是指定是否「绘制」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。
名称含义类型备注
top是否显示上部的圆点Boolean默认为 false
bottom是否显示底部的圆点Boolean默认为 false
left是否显示左侧的圆点Boolean默认为 false
right是否显示右侧的圆点Boolean默认为 false
size圆点的大小Number默认为 3
fill圆点的填充色String默认为 '#72CC4A'
stroke圆点的边框颜色String默认为 '#72CC4A'
lineWidth圆点边框的宽度Number默认为 1

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了  linkPoints  配置项进行连入点的配置。
img

const data = {
  // ... data 内容
};
const graph = new F6.Graph({
  // ... 图的其他配置
  defaultNode: {
    // 其他配置
    linkPoints: {
      top: true,
      bottom: true,
      left: true,
      right: true,
      size: 5,
      fill: '#fff',
    },
  },
});
// ...