getStraightPath()
計算兩點之間的直線路徑。
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簽名
| 名稱 | 類型 |
|---|---|
#參數 | |
# sourceX | 數字 |
# sourceY | 數字 |
# targetX | 數字 |
# targetY | 數字 |
#回傳值 | |
# [0] | 字串要在 SVG <path> 元素中使用的路徑。 |
# [1] | 數字您可以用來為此邊緣渲染標籤的 x 位置。 |
# [2] | 數字您可以用來為此邊緣渲染標籤的 y 位置。 |
# [3] | 數字來源 x 位置與此路徑中間的 x 位置之間的絕對差值。 |
# [4] | 數字來源 y 位置與此路徑中間的 y 位置之間的絕對差值。 |
備註
- 此函式回傳一個元組（也就是固定大小的陣列），以便更容易一次處理多個邊緣路徑。