getBezierPath()

getBezierPath 工具程式會傳回在兩個節點之間渲染貝茲曲線邊緣所需的一切。

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

簽名

名稱	類型	預設值
#參數
#`params`	`物件`
#`params.sourceX`	`數字`
#`params.sourceY`	`數字`
#`params.sourcePosition?`	`Position`	`Position.Bottom`
#`params.targetX`	`數字`
#`params.targetY`	`數字`
#`params.targetPosition?`	`Position`	`Position.Top`
#`params.curvature?`	`數字`	`0.25`
#傳回值
#`[0]`	`字串` 要在 SVG <path> 元素中使用的路徑。
#`[1]`	`數字` 可用來為此邊緣渲染標籤的 x 位置。
#`[2]`	`數字` 可用來為此邊緣渲染標籤的 y 位置。
#`[3]`	`數字` 來源 x 位置與此路徑中間的 x 位置之間的絕對差值。
#`[4]`	`數字` 來源 y 位置與此路徑中間的 y 位置之間的絕對差值。

筆記

此函式會傳回一個元組（也就是固定大小的陣列），以便一次處理多個邊緣路徑。

工具程式