getSmoothStepPath()

getSmoothStepPath 实用程序返回在两个节点之间渲染阶梯路径所需的一切。borderRadius 属性可用于选择这些步骤的角的圆度。

¥The getSmoothStepPath util returns everything you need to render a stepped path between two nodes. The borderRadius property can be used to choose how rounded the corners of those steps are.


import { Position, getSmoothStepPath } from '@xyflow/react';
 
const source = { x: 0, y: 20 };
const target = { x: 150, y: 100 };
 
const [path, labelX, labelY, offsetX, offsetY] = getSmoothStepPath({
  sourceX: source.x,
  sourceY: source.y,
  sourcePosition: Position.Right,
  targetX: target.x,
  targetY: target.y,
  targetPosition: Position.Left,
});
 
console.log(path); //=> "M0 20L20 20L 70,20Q 75,20 75,25L 75,95Q ..."
console.log(labelX, labelY); //=> 75, 60
console.log(offsetX, offsetY); //=> 75, 40

签名

¥Signature

Parameters:

Name	Type	Default
`[0].sourceX`	`number` The `x` position of the source handle.
`[0].sourceY`	`number` The `y` position of the source handle.
`[0].sourcePosition`	`Position` The position of the source handle.	`Position.Bottom`
`[0].targetX`	`number` The `x` position of the target handle.
`[0].targetY`	`number` The `y` position of the target handle.
`[0].targetPosition`	`Position` The position of the target handle.	`Position.Top`
`[0].borderRadius`	`number`	`5`
`[0].centerX`	`number`
`[0].centerY`	`number`
`[0].offset`	`number`	`20`

Returns:

[path: string, labelX: number, labelY: number, offsetX: number, offsetY: number]

A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label.

path: the path to use in an SVG <path> element.
labelX: the x position you can use to render a label for this edge.
labelY: the y position you can use to render a label for this edge.
offsetX: the absolute difference between the source x position and the x position of the middle of this path.
offsetY: the absolute difference between the source y position and the y position of the middle of this path.

注释

¥Notes

此函数返回一个元组（又名固定大小数组），以便更轻松地同时处理多个边路径。

¥This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once.
你可以将 borderRadius 属性设置为 0 以获取阶梯边缘路径。

¥You can set the borderRadius property to 0 to get a step edge path.