getBezierPath()
该 getBezierPath
工具返回渲染两个节点之间贝塞尔曲线边所需的全部信息。
import { Position, getBezierPath } from '@xyflow/react';
const source = { x: 0, y: 20 };
const target = { x: 150, y: 100 };
const [path, labelX, labelY, offsetX, offsetY] = getBezierPath({
sourceX: source.x,
sourceY: source.y,
sourcePosition: Position.Right,
targetX: target.x,
targetY: target.y,
targetPosition: Position.Left,
});
console.log(path); //=> "M0,20 C75,20 75,100 150,100"
console.log(labelX, labelY); //=> 75, 60
console.log(offsetX, offsetY); //=> 75, 40
签名
名称 | 类型 | 默认值 |
---|---|---|
#参数 |
|
|
# params | object |
|
# params.sourceX | number |
|
# params.sourceY | number |
|
# params.sourcePosition? | Position |
|
# params.targetX | number |
|
# params.targetY | number |
|
# params.targetPosition? | Position |
|
# params.curvature? | number |
|
#返回值 |
|
|
# [0] | string 在 SVG <path> 元素中使用的路径。 |
|
# [1] | number 您可以使用该 x 位置渲染此边的标签。 |
|
# [2] | number 您可以使用该 y 位置渲染此边的标签。 |
|
# [3] | number 源 x 位置与该路径中间点 x 位置的绝对差。 |
|
# [4] | number 源 y 位置与该路径中间点 y 位置的绝对差。 |
|
注释
- 此函数返回一个元组(又名固定大小的数组),以方便一次处理多个边路径。