如何不在同一水平垂直线上 有其他办法吗

动态 未结 0 193
小小草
小小草 LV1 2023年9月23日 23:40 发表
如果起点和终点不在同一水平或垂直线上,您可以使用 `d3-shape` 库中的 `curveBasis()` 方法来计算贝塞尔曲线的中心点。具体来说,您可以按照以下步骤进行操作: 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'; import { curveBasis } from 'd3-shape'; 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 curve = curveBasis(p); const length = curve.length(); const { x, y } = curve.centroid(length / 2); return [x, y]; }, [path]); return ( <> ); }; export default MyEdge; ``` 在这个例子中,我们使用
收藏(0)  分享
相关标签: 智能问答
问题没解决?让AI助手帮你作答 AI助手
0个回复
  • 消灭零回复