是的,您可以使用纯 JavaScript 来计算贝塞尔曲线的中心点。具体来说,您可以按照以下步骤进行操作:
1. 在 `Edge` 组件中,使用 `getBezierPath` 方法获取线的路径。例如:
```jsx
import React from 'react';
import { Edge } from 'react-flow-renderer';
const MyEdge = ({ id, sourceX, sourceY, targetX, targetY }) => {
const path = getBezierPath({ sourceX, sourceY, targetX, targetY });
return (
);
};
export default MyEdge;
```
2. 使用 `path` 属性中的路径信息计算线的中心位置。具体来说,您可以使用以下公式计算贝塞尔曲线的中心点:
```jsx
import React, { useMemo } from 'react';
import { Edge } from 'react-flow-renderer';
const MyEdge = ({ id, sourceX, sourceY, targetX, targetY }) => {
const path = useMemo(() => getBezierPath({ sourceX, sourceY, targetX, targetY }), [sourceX, sourceY, targetX, targetY]);
const [cx, cy] = useMemo(() => {
const p = new Path2D(path);
const length = p.getTotalLength();
let x = 0;
let y = 0;
let count = 0;
for (let i = 0; i <= length; i += length / 10) {
const { x: px, y: py } = p.getPointAtLength(i);
x += px;
y += py;
count++;
}
return [x / count, y / count];
}, [path]);
return (
<>
>
);
};
export default My