Vue-Flow自定义MarkEnd MarkStrat

问题描述

在使用Vue-Flow的时候我想实现一些自定义的markend或markstart，但是又不想自己写一个路径算法，于是我根据官方提供的组件进行加工

如图： 我想是实现实心箭头路径但是使用smoothstep路径，其实只需要引入组件后再加上箭头的path路径即可

代码

我们先新建一个vue组件来写edge

<template>
    <g>
        <!-- 圆形markStart -->
        <circle :cx="props.sourceX" :cy="props.sourceY" r="4" fill="#29a3ff" />
        <!-- path -->
        <path :d="path" fill="none" stroke="#29a3ff" stroke-width="2" />
        <!-- 箭头markEnd -->
        <path :transform="transform" :d="`M ${targetX} ${targetY + 2} L ${targetX - 5} ${targetY - 10} L ${targetX + 5} ${targetY - 10} Z`" fill="#29a3ff" stroke="none" />
    </g>
</template>

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

const props = defineProps<SmoothStepEdgeProps>()
const path = computed(() => getSmoothStepPath(props)[0])

const transform = computed(() => {
    return getArrowTransform(props)
})

function getArrowTransform(props: SmoothStepEdgeProps) {
    const { targetPosition } = props
    if (targetPosition === 'top') {
        return `rotate(0 ${props.targetX} ${props.targetY})`
    }
    if (targetPosition === 'bottom') {
        return `rotate(180 ${props.targetX} ${props.targetY})`
    }
    if (targetPosition === 'left') {
        return `rotate(-90 ${props.targetX} ${props.targetY})`
    }
    if (targetPosition === 'right') {
        return `rotate(90 ${props.targetX} ${props.targetY})`
    }
}
</script>

如代码所示 我们使用了getSmoothStepPath方法来获取连线的路径信息，然后通过props传递的数据拿到目标点的位置和连接方法从而旋转和绘制三角形达到目的，当然你也可以使用path绘制更多花里胡哨的mark

之后在主组件的插槽中使用这个edge即可

<template #edge-custom="props">
  <CustomEdge v-bind="props" />
</template>
<template #connection-line="props">
  <CustomEdge v-bind="props" />
</template>