getSmoothStepPath()

getSmoothStepPath 工具函式會回傳在兩個節點之間渲染階梯式路徑所需的一切。 borderRadius 屬性可以用來選擇這些階梯轉角的圓角程度。

import { Position, getSmoothStepPath } from '@xyflow/svelte';
 
const source = { x: 0, y: 20 };
const target = { x: 150, y: 100 };
 
const [path, labelX, labelY, offsetX, offsetY] = getSmoothStepPath({
  sourceX: source.x,
  sourceY: source.y,
  sourcePosition: Position.Right,
  targetX: target.x,
  targetY: target.y,
  targetPosition: Position.Left,
});
 
console.log(path); //=> "M0 20L20 20L 70,20Q 75,20 75,25L 75,95Q ..."
console.log(labelX, labelY); //=> 75, 60
console.log(offsetX, offsetY); //=> 75, 40

簽名 (Signature)

名稱	類型	預設值
#參數
#`sourceX`	`number`
#`sourceY`	`number`
#`sourcePosition`	`Position`	`Position.Bottom`
#`targetX`	`number`
#`targetY`	`number`
#`targetPosition?`	`Position`	`Position.Top`
#`borderRadius?`	`number`	`5`
#`centerX?`	`number`
#`centerY?`	`number`
#`offset?`	`number`	`20`
#回傳值
#`[0]`	`string` 在 SVG <path> 元素中使用的路徑。
#`[1]`	`number` 您可以使用的 x 位置，以呈現此邊緣的標籤。
#`[2]`	`number` 您可以使用的 y 位置，以呈現此邊緣的標籤。
#`[3]`	`number` 來源 x 位置與此路徑中間 x 位置之間的絕對差異。
#`[4]`	`number` 來源 y 位置與此路徑中間 y 位置之間的絕對差異。

注意事項

此函式回傳一個元組（也稱為固定大小的陣列），以便更容易同時處理多個邊緣路徑。
您可以將 borderRadius 屬性設定為 0，以取得階梯邊緣路徑。

類型