边缘

🌐 Edge

Vue Flow 提供了一些工具，你可以使用它们来创建自己的自定义边，而不必担心如何实际实现边的路径计算。

🌐 Vue Flow exports a couple of utilities you can use to create your own custom edges without having to worry how to actually implement the edge path calculation.

如果你不想实际改变边缘路径的计算方式，只是希望在常规边缘行为的基础上实现一些自定义逻辑，这可能会很有帮助。

🌐 This can be helpful if you don't want to actually change the way the edge path is calculated but just want to implement some custom logic on top of the regular edge behavior.

或者，所有默认边缘组件也都已导出，可用于创建自定义边缘。

🌐 Alternatively, all default edge components are also exported and can be used to create custom edges.

<script lang="ts" setup>
// CustomEdge.vue
import { EdgeProps, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '@vue-flow/core'

const props = defineProps<EdgeProps>()

// do some custom logic
</script>
<template>
  <!-- wrap the bezier edge or do something else in the template -->
  <BezierEdge v-bind="props" />
</template>

getBezierPath

• 详细信息：

  返回贝塞尔路径和中心位置的函数。

• 参数：

  • sourceX：源句柄的 x 位置。
  • sourceY：源句柄的 y 位置。
  • sourcePosition：源句柄的位置。
  • targetX：目标句柄的 x 位置。
  • targetY：目标句柄的 y 轴位置。
  • targetPosition：目标句柄的位置。
  • curvature：路径的曲率。

• 返回：

  • path：表示路径的字符串。
  • labelX：标签的 x 位置。
  • labelY：标签的 y 位置。
  • offsetX：标签的 x 偏移量。
  • offsetY：标签的 y 偏移量。

• 示例：

<script lang="ts" setup>
import { computed } from "vue"
import { BaseEdge, getBezierPath, EdgeProps } from '@vue-flow/core'

const props = defineProps<EdgeProps>()

const edgePathParams = computed(() => getBezierPath({ ...props, curvature: 0.5 }))
</script>

<template>
  <BaseEdge :path="edgePathParams[0]" />
</template>

getSimpleBezierPath

• 详细信息：

返回简单贝塞尔路径（从句柄到句柄没有曲率）和中心位置的函数。

🌐 A function that returns a simple bezier path (no curvature from and toward handles) and center positions.

• 参数：
  • sourceX：源句柄的 x 位置。
  • sourceY：源句柄的 y 位置。
  • sourcePosition：源句柄的位置。
  • targetX：目标句柄的 x 位置。
  • targetY：目标句柄的 y 轴位置。
  • targetPosition：目标句柄的位置。
• 返回：
  • path：表示路径的字符串。
  • labelX：标签的 x 位置。
  • labelY：标签的 y 位置。
  • offsetX：标签的 x 偏移量。
  • offsetY：标签的 y 偏移量。
• 示例：

<script lang="ts" setup>
import { computed } from "vue"
import { BaseEdge, getSimpleBezierPath, EdgeProps } from '@vue-flow/core'

const props = defineProps<EdgeProps>()

const edgePathParams = computed(() => getSimpleBezierPath(props))
</script>

<template>
  <BaseEdge :path="edgePathParams[0]" />
</template>

getSmoothStepPath

• 详细信息：

  一个返回平滑步进路径的函数（你可以使用 borderRadius 0 来表示阶梯路径）。

• 参数：

  • sourceX：源句柄的 x 位置。
  • sourceY：源句柄的 y 位置。
  • sourcePosition：源句柄的位置。
  • targetX：目标句柄的 x 位置。
  • targetY：目标句柄的 y 轴位置。
  • targetPosition：目标句柄的位置。
  • centerX：中心的 x 位置。
  • centerY：中心的 y 位置。
  • offset：路径的偏移量。
  • borderRadius：路径的边框半径。

  INFO

  你可以使用 borderRadius: 0 创建没有圆滑角的阶梯路径。

• 返回：

  • path：表示路径的字符串。
  • labelX：标签的 x 位置。
  • labelY：标签的 y 位置。
  • offsetX：标签的 x 偏移量。
  • offsetY：标签的 y 偏移量。

• 示例：

<script lang="ts" setup>
import { computed } from "vue"
import { BaseEdge, getSmoothStepPath, EdgeProps } from '@vue-flow/core'

const props = defineProps<EdgeProps>()

const edgePathParams = computed(() => getSmoothStepPath({ ...props, borderRadius: 8 }))
</script>

<template>
  <BaseEdge :path="edgePathParams[0]" />
</template>

getStraightPath

• 详细信息：

  返回直线路径的函数。

• 参数：

  • sourceX：源句柄的 x 位置。
  • sourceY：源句柄的 y 位置。
  • targetX：目标句柄的 x 位置。
  • targetY：目标句柄的 y 轴位置。

• 返回：

  • path：表示路径的字符串。
  • labelX：标签的 x 位置。
  • labelY：标签的 y 位置。
  • offsetX：标签的 x 偏移量。
  • offsetY：标签的 y 偏移量。

• 示例：

<script lang="ts" setup>
import { computed } from "vue"
import { BaseEdge, getStraightPath, EdgeProps } from '@vue-flow/core'

const props = defineProps<EdgeProps>()

const edgePathParams = computed(() => getStraightPath(props))
</script>

<template>
  <BaseEdge :path="edgePathParams[0]" />
</template>