参考实用程序

getStraightPath()

GitHub 上的源代码

计算两点之间的直线路径。

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 位置之间的绝对差值。

笔记

  • 此函数返回一个元组(又称固定大小的数组),以便更容易同时处理多个边路径。