getSmoothStepPath()

getSmoothStepPath ユーティリティは、2 つのノード間に階段状のパスをレンダリングするために必要なすべてを返します。borderRadius プロパティを使用すると、これらの階段の角の丸みを指定できます。

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

シグネチャ

名前	型	デフォルト
#パラメータ
#`sourceX`	`数値`
#`sourceY`	`数値`
#`sourcePosition`	`Position`	`Position.Bottom`
#`targetX`	`数値`
#`targetY`	`数値`
#`targetPosition?`	`Position`	`Position.Top`
#`borderRadius?`	`数値`	`5`
#`centerX?`	`数値`
#`centerY?`	`数値`
#`offset?`	`数値`	`20`
#戻り値
#`[0]`	`文字列` SVG <path> 要素で使用するパス。
#`[1]`	`数値` このエッジのラベルをレンダリングするために使用できる x 位置。
#`[2]`	`数値` このエッジのラベルをレンダリングするために使用できる y 位置。
#`[3]`	`数値` パスの真中の x 位置と始点 x 位置の絶対差。
#`[4]`	`数値` パスの真中の y 位置と始点 y 位置の絶対差。

注記

この関数は、複数のエッジパスを一度に簡単に処理できるように、タプル (固定サイズ配列) を返します。
borderRadius プロパティを 0 に設定すると、角が鋭利なパスを作成できます。

ユーティリティ