自定义边

🌐 Custom Edges

像 自定义节点 一样，React Flow 中的自定义连线部分也只是 React 组件。这意味着你可以在连线上渲染任何你想要的内容！本指南向你展示如何实现带有一些额外控件的自定义连线。有关可用于自定义连线的属性的完整参考，请参见 Edge 参考。

🌐 Like custom nodes, parts of a custom edge in React Flow are just React components. That means you can render anything you want along an edge! This guide shows you how to implement a custom edge with some additional controls. For a comprehensive reference of props available for custom edges, see the Edge reference.

基本自定义边

🌐 A basic custom edge

如果一条边无法在两个相连的节点之间渲染路径，那么它对我们几乎没有用。这些路径总是基于 SVG 的，通常使用 <BaseEdge /> 组件来渲染。为了计算实际要渲染的 SVG 路径，React Flow 提供了一些实用的工具函数：

🌐 An edge isn’t much use to us if it doesn’t render a path between two connected nodes. These paths are always SVG-based and are typically rendered using the <BaseEdge /> component. To calculate the actual SVG path to render, React Flow comes with some handy utility functions:

• getBezierPath
• getSimpleBezierPath
• getSmoothStepPath
• getStraightPath

为了启动我们的自定义边，我们只需在源点和目标点之间渲染一条直线路径。

🌐 To kickstart our custom edge, we’ll just render a straight path between the source and target.

import { BaseEdge, getStraightPath } from '@xyflow/react';
 
export function CustomEdge({ id, sourceX, sourceY, targetX, targetY }) {
  const [edgePath] = getStraightPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });
 
  return (
    <>
      <BaseEdge id={id} path={edgePath} />
    </>
  );
}

const edgeTypes = {
  'custom-edge': CustomEdge,
};

export function Flow() {
  return <ReactFlow edgeTypes={edgeTypes} />;
}

const initialEdges = [
  {
    id: 'e1',
    source: 'n1',
    target: 'n2',
    type: 'custom-edge',
  },
];

自定义 SVG 边缘路径

🌐 Custom SVG edge paths

如前所述，如果你想在 React Flow 中制作自定义边，你必须使用上面讨论的四个路径创建函数之一（例如 getBezierPath）。然而，如果你想制作其他路径形状，比如正弦边或其他类型的边，那么你将不得不自己制作边路径。

🌐 As discussed previously, if you want to make a custom edge in React Flow, you have to use either of the four path creation functions discussed above (e.g getBezierPath). However if you want to make some other path shape like a Sinusoidal edge or some other edge type then you will have to make the edge path yourself.

我们从像 getBezierPath 这样的函数得到的边缘路径只是一个路径字符串，我们将其传递给 <BaseEdge /> 组件的 path 属性。它包含绘制该路径所需的必要信息，例如它应该从哪里开始，在哪里弯曲，在哪里结束等等。两个点 (x1, y1) 到 (x2, y2) 之间的简单直线路径字符串看起来像这样:

🌐 The edge path we get from functions like getBezierPath is just a path string which we pass into the path prop of the <BaseEdge /> component. It contains the necessary information needed in order to draw that path, like where it should start from, where it should curve, where it should end, etc. A simple straight path string between two points (x1, y1) to (x2, y2) would look like:

M x1 y1 L x2 y2

SVG 路径是一个由命令如 M、L、Q 等及其值连接组成的列表。以下列出了一些这些命令及其支持的值。

🌐 An SVG path is a concatenated list of commands like M, L, Q, etc, along with their values. Some of these commands are listed below, along with their supported values.

• M x1 y1 是移动到命令，用于将当前点移动到 x1, y1 坐标。
• L x1 y1 是直线到命令，用于从当前点绘制一条线到 x1, y1 坐标。
• Q x1 y1 x2 y2 是二次贝塞尔曲线命令，用于从当前点绘制一条贝塞尔曲线到 x2, y2 坐标。x1, y1 是曲线的控制点，用于决定曲线的弯曲度。

每当我们想为自定义边开始一条路径时，我们使用 M 命令将当前点移动到 sourceX, sourceY，该值作为自定义边组件的属性传入。然后根据我们想要的形状，我们会使用其他命令，例如 L（绘制直线）、Q（绘制曲线），最后在 targetX, targetY 结束路径，该值也是作为自定义边组件的属性传入。

🌐 Whenever we want to start a path for our custom edge, we use the M command to move our current point to sourceX, sourceY which we get as props in the custom edge component. Then based on the shape we want, we will use other commands like L(to make lines), Q(to make curves) and then finally end our path at targetX, targetY which we get as props in the custom edge component.

如果你想了解更多关于 SVG 路径的信息，你可以查看 SVG-Path-Editor 。你可以在那里粘贴任何 SVG 路径，并通过直观的用户界面分析单独的路径命令。

🌐 If you want to learn more about SVG paths, you can check out SVG-Path-Editor . You can paste any SVG path there and analyze individual path commands via an intuitive UI.

这里有一个包含两种自定义边缘路径的示例，一个是阶梯边缘，一个是正弦边缘。你应该先看阶梯边缘，以便熟悉自定义 SVG 路径，因为它很简单，然后再看看正弦边缘是如何制作的。通过这个示例，你将掌握为自定义边缘制作自定义 SVG 路径的必要知识。

🌐 Here is an example with two types of custom edge paths, a Step edge and a Sinusoidal edge. You should look at the Step edge first to get your hands dirty with custom SVG paths since it’s simple, and then look at how the Sinusoidal edge is made. After going through this example, you will have the necessary knowledge to make custom SVG paths for your custom edges.