getStraightPath()

計算兩點之間的直線路徑。

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`	`數字`
#`sourceY`	`數字`
#`targetX`	`數字`
#`targetY`	`數字`
#回傳值
#`[0]`	`字串` 在 SVG <path> 元素中使用的路徑。
#`[1]`	`數字` 可用於渲染此邊緣標籤的 x 位置。
#`[2]`	`數字` 可用於渲染此邊緣標籤的 y 位置。
#`[3]`	`數字` 來源 x 位置與此路徑中間 x 位置之間的絕對差異。
#`[4]`	`數字` 來源 y 位置與此路徑中間 y 位置之間的絕對差異。

注意事項

此函數回傳一個元組（又稱固定大小的陣列），以便更輕鬆地同時處理多個邊緣路徑。

類型