getStraightPath()

GitHub のソースコード

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 座標の絶対差。

備考

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