getStraightPath()
2点間の直線パスを計算します。
import { getStraightPath } from '@xyflow/svelte';
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
シグネチャ
名前 | 型 |
---|---|
#パラメータ |
|
# sourceX | number |
# sourceY | number |
# targetX | number |
# targetY | number |
#戻り値 |
|
# [0] | string SVG の <path> 要素で使用できるパス。 |
# [1] | number このエッジのラベルを描画するために使用できる x 座標。 |
# [2] | number このエッジのラベルを描画するために使用できる y 座標。 |
# [3] | number ソースの x 座標とこのパスの真ん中の x 座標の絶対差。 |
# [4] | number ソースの y 座標とこのパスの真ん中の y 座標の絶対差。 |
備考
- この関数は、複数のエッジパスを一度に処理しやすくするためにタプル(固定サイズの配列)を返します。