getBezierPath()

getBezierPath ユーティリティは、2つのノード間にベジェ曲線エッジをレンダリングするために必要なすべてを返します。

import { Position, getBezierPath } from '@xyflow/svelte';
 
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`	`オブジェクト`
#`params.sourceX`	`数値`
#`params.sourceY`	`数値`
#`params.sourcePosition?`	`Position`	`Position.Bottom`
#`params.targetX`	`数値`
#`params.targetY`	`数値`
#`params.targetPosition?`	`Position`	`Position.Top`
#`params.curvature?`	`数値`	`0.25`
#戻り値
#`[0]`	`文字列` SVGの<path>要素で使用するパス。
#`[1]`	`数値` このエッジのラベルをレンダリングするために使用できるX座標。
#`[2]`	`数値` このエッジのラベルをレンダリングするために使用できるY座標。
#`[3]`	`数値` ソースのX座標とこのパスの中央のX座標との絶対差。
#`[4]`	`数値` ソースのY座標とこのパスの中央のY座標との絶対差。

注釈

この関数は、複数のエッジパスを一度に扱いやすくするために、タプル（固定サイズの配列）を返します。

型