getStraightPath()
2点間の直線パスを計算します。
import { getStraightPath } from '@xyflow/react';
const source = { x: 0, y: 20 };
const target = { x: 150, y: 100 };
const [path, labelX, labelY, offsetX, offsetY] = getStraightPath({
sourceX: source.x,
sourceY: source.y,
targetX: target.x,
targetY: target.y,
});
console.log(path); //=> "M 0,20L 150,100"
console.log(labelX, labelY); //=> 75, 60
console.log(offsetX, offsetY); //=> 75, 40
シグネチャ
名前 | 型 |
---|---|
| |
数値 | |
数値 | |
数値 | |
数値 | |
| |
# [0] | 文字列 SVG <path> 要素で使用するパス。 |
# [1] | 数値 このエッジのラベルをレンダリングするために使用できる x 座標。 |
# [2] | 数値 このエッジのラベルをレンダリングするために使用できる y 座標。 |
# [3] | 数値 ソースの x 座標とこのパスの真中の x 座標の絶対差。 |
# [4] | 数値 ソースの y 座標とこのパスの真中の y 座標の絶対差。 |
注記
- この関数は、複数のエッジパスを一度に扱いやすくするために、タプル (固定サイズ配列) を返します。