Appearance
边缘
¥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.
vue
<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
详细信息：
¥Details:
返回贝塞尔路径和中心位置的函数。
¥A function that returns a bezier path and center positions.
参数：
¥Arguments:
sourceX：源句柄的 x 位置。¥
sourceX: The x position of the source handle.sourceY：源句柄的 y 位置。¥
sourceY: The y position of the source handle.sourcePosition：源句柄的位置。¥
sourcePosition: The position of the source handle.targetX：目标句柄的 x 位置。¥
targetX: The x position of the target handle.targetY：目标句柄的 y 轴位置。¥
targetY: The y position of the target handle.targetPosition：目标句柄的位置。¥
targetPosition: The position of the target handle.curvature：路径的曲率。¥
curvature: The curvature of the path.
返回：
¥Returns:
path：表示路径的字符串。¥
path: A string representing the path.labelX：标签的 x 位置。¥
labelX: The x position of the label.labelY：标签的 y 位置。¥
labelY: The y position of the label.offsetX：标签的 x 偏移量。¥
offsetX: The x offset of the label.offsetY：标签的 y 偏移量。¥
offsetY: The y offset of the label.
示例：
¥Example:
vue
<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
详细信息：
¥Details:
返回简单贝塞尔路径（从句柄到句柄没有曲率）和中心位置的函数。
¥A function that returns a simple bezier path (no curvature from and toward handles) and center positions.
参数：
¥Arguments:
sourceX：源句柄的 x 位置。¥
sourceX: The x position of the source handle.sourceY：源句柄的 y 位置。¥
sourceY: The y position of the source handle.sourcePosition：源句柄的位置。¥
sourcePosition: The position of the source handle.targetX：目标句柄的 x 位置。¥
targetX: The x position of the target handle.targetY：目标句柄的 y 轴位置。¥
targetY: The y position of the target handle.targetPosition：目标句柄的位置。¥
targetPosition: The position of the target handle.
返回：
¥Returns:
path：表示路径的字符串。¥
path: A string representing the path.labelX：标签的 x 位置。¥
labelX: The x position of the label.labelY：标签的 y 位置。¥
labelY: The y position of the label.offsetX：标签的 x 偏移量。¥
offsetX: The x offset of the label.offsetY：标签的 y 偏移量。¥
offsetY: The y offset of the label.
示例：
¥Example:
vue
<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
详细信息：
¥Details:
返回平滑阶梯路径的函数（可以使用
borderRadius0 表示阶梯路径）。¥A function that returns a smoothstep path (you can use a
borderRadius0 for a step path).参数：
¥Arguments:
sourceX：源句柄的 x 位置。¥
sourceX: The x position of the source handle.sourceY：源句柄的 y 位置。¥
sourceY: The y position of the source handle.sourcePosition：源句柄的位置。¥
sourcePosition: The position of the source handle.targetX：目标句柄的 x 位置。¥
targetX: The x position of the target handle.targetY：目标句柄的 y 轴位置。¥
targetY: The y position of the target handle.targetPosition：目标句柄的位置。¥
targetPosition: The position of the target handle.centerX：中心的 x 位置。¥
centerX: The x position of the center.centerY：中心的 y 位置。¥
centerY: The y position of the center.offset：路径的偏移量。¥
offset: The offset of the path.borderRadius：路径的边框半径。¥
borderRadius: The border radius of the path.
INFO
borderRadius: 0to create a step path with no smooth corners. :::你可以使用返回：
¥Returns:
path：表示路径的字符串。¥
path: A string representing the path.labelX：标签的 x 位置。¥
labelX: The x position of the label.labelY：标签的 y 位置。¥
labelY: The y position of the label.offsetX：标签的 x 偏移量。¥
offsetX: The x offset of the label.offsetY：标签的 y 偏移量。¥
offsetY: The y offset of the label.
示例：
¥Example:
vue
<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
详细信息：
¥Details:
返回直线路径的函数。
¥A function that returns a straight path.
参数：
¥Arguments:
sourceX：源句柄的 x 位置。¥
sourceX: The x position of the source handle.sourceY：源句柄的 y 位置。¥
sourceY: The y position of the source handle.targetX：目标句柄的 x 位置。¥
targetX: The x position of the target handle.targetY：目标句柄的 y 轴位置。¥
targetY: The y position of the target handle.
返回：
¥Returns:
path：表示路径的字符串。¥
path: A string representing the path.labelX：标签的 x 位置。¥
labelX: The x position of the label.labelY：标签的 y 位置。¥
labelY: The y position of the label.offsetX：标签的 x 偏移量。¥
offsetX: The x offset of the label.offsetY：标签的 y 偏移量。¥
offsetY: The y offset of the label.
示例：
¥Example:
vue
<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>