---
nav: 指南
group:
title: 基础
order: 1
title: 节点
order: 1
toc: content
---
本页从内置节点出发，介绍如何定义符合业务语义的自定义节点。更复杂的连接规则、锚点和框架节点方案，会在 [进阶节点](../advanced/node.zh.md) 中继续展开。
::::info{title=阅读提示}
- 适合已经跑通过 [快速上手](../get-started.zh.md) 和 [实例与图数据](class.zh.md) 的读者
- 前置知识：知道 `graphData`、`render` 和基础节点类型
- 本页不展开连接规则、锚点、React/Vue 节点方案，这些内容请继续阅读 [进阶节点](../advanced/node.zh.md)
- 相关 API：[`nodeModel`](../../api/runtime-model/nodeModel.zh.md)、[`graphModel`](../../api/runtime-model/graphModel.zh.md)、[`主题`](../../api/logicflow-instance/theme.zh.md)
::::
LogicFlow 内置了一些基础节点，开发者在实际应用场景中，可以基于这些基础节点，定义符合自己业务逻辑的节点。
## 认识基础节点
LogicFlow是基于svg做的流程图编辑框架，所以我们的节点和连线都是svg基本形状，对LogicFlow节点样式的修改，也就是对svg基本形状的修改。LogicFlow内部存在7种基础节点，分别为：
1. 矩形 --- rect
2. 圆形 --- circle
3. 椭圆 --- ellipse
4. 多边形 --- polygon
5. 菱形 --- `diamond`（基于 polygon）
6. 文本 --- text
7. HTML --- `html`
1. `自定义节点view`最终生成的图形的形状属性必须和`model`
中形状属性的一致，因为节点的锚点、外边框都是基于节点model中的`width`和`height`生成。
2. `自定义节点view`最终生成的图形整体轮廓必须和继承的基础图形一致，不能继承`rect`
而在getShape的时候返回的最终图形轮廓变成了`circle`。因为LogicFlow对于节点上的连线调整、锚点生成等会基于基础图形进行计算。
:::
#### 一些思考🤔️
##### 1. 为什么`rect`的`x`,`y`不是直接从`model`中获取的`x`, `y`?
在LogicFlow所有的基础节点中，`model`里面的`x`,`y`都是统一表示元素中心点坐标。`getShape`方法给我们提供直接生成svg
dom的方式，但在svg中, 不同元素类型`x`,`y`表示的坐标位置不同：
- `rect`: 通过`x`, `y`表示图形的位置，但是表示的是图形左上角坐标。 所以一般通过中心点，然后减去节点的宽高的一半计算出左上角坐标。
```tsx | pure
const { x, y, width, height, radius } = this.props.model
// svg dom
h('rect', {
...style,
x: x - width / 2,
y: y - height / 2,
rx: radius, // 注意这里是rx属性而不是radius
ry: radius,
width,
height,
})
```
- `circle`和`ellipse`: 通过`cx`, `cy`表示图形的位置，含义为中心点的坐标，这里就不需要改变。
```tsx | pure
const { x, y, r } = this.props.model;
// svg dom
h("circle", {
...style,
r, // 半径保持不变
cx: x,
cy: y,
})
```
```tsx | pure
// 椭圆
const { x, y, rx, ry } = this.props.model
// svg dom
h('ellipse', {
...style,
cx: x,
cy: y,
rx,
ry,
})
```
- `polygon`: 所有的顶点坐标已包含位置。
```tsx | pure
const { x, y, points } = this.props.model
const pointStr = points.map((point) => {
return `${point[0] + x}, ${point[1] + y}`
}).join(' ')
// svg dom
h('polygon', {
...style,
points: pointStr,
})
```
:::info{title=自定义矩形的view时radius设置}
在`model`中，`radius`是矩形节点的形状属性。但是在自定义`view`
时需要注意，svg里面设置矩形的圆角并不是用`radius`
，而是使用 rx , ry。所以在自定义`view`
的矩形时，需要将model中`radius`的赋值给`rx`和`ry`，否则圆角将不生效。
:::
##### 2. props怎么用？
LogicFlow是基于`preact`开发的，我们自定义节点view的时候，可以通过`this.props`
获取父组件传递过来的数据。`this.props`对象包含两个属性，分别为:
- `model`: 表示自定义节点的model
- [graphModel](../../api/runtime-model/graphModel.zh.md): 表示logicflow整个图的model
##### 3. 图标的path如何获取？
一般情况下，图标我们可以找UI或者去 iconfont.cn
获得一个svg格式的文件。然后再IDE中以文本的方式打开，然后格式化，就可以看到代码。代码中一般是最外层一个svg标签，里面是一个或者多个path。这个时候，我们使用前面提到的`h`
方法来实现svg文件中的代码即可。
svg标签一般包括如下属性：
- `viewBox`: viewBox
属性允许指定一个给定的一组图形伸展以适应特定的容器元素。一般把svg标签上的`viewBox`属性值复制过来就行。
- `width`和`height`: 这个不需要使用svg标签上的`width`和`height`, 直接写成你期望的宽高就行。
path标签属性：
- `d`: 该属性定义了一个路径。直接复制svg代码过来即可, 不需要去关系d具体内容表示的含义。
- `fill`: 路径的填充颜色, 一般和节点的边框颜色一致，但是也可以按照业务需求自定义。
本章基础节点就介绍到这里，如果有对节点更多需求请移步至[进阶-节点](../advanced/node.zh.md)进行查看。