自定义连线箭头标记

演示如何使用 SVG 标记定义创建连接线的自定义箭头标记样式并动态切换。

自定义连线箭头标记

功能概述

此示例演示如何使用 SVG 标记定义创建连接线的自定义箭头标记。提供了多种箭头样式，可以通过选择器在它们之间动态切换。

核心特性实现

定义自定义箭头标记

创建包含 SVG 路径数据的标记配置对象数组：

const myArrows = [
    {
        viewBox: '0 0 12 12',
        markerWidth: 30,
        markerHeight: 30,
        refX: 3,
        refY: 3,
        data: 'M 0 0, V 6, L 4 3, Z'  // 三角形箭头
    },
    {
        viewBox: '0 0 12 12',
        markerWidth: 20,
        markerHeight: 20,
        refX: 2,
        refY: 3,
        data: 'M0 0 H6 V6 H0 Z'  // 方形箭头
    },
    {
        viewBox: '0 0 12 12',
        markerWidth: 30,
        markerHeight: 30,
        refX: 2,
        refY: 3,
        data: `M 0 3 A 3 3 0 0 1 6 3 A 3 3 0 0 1 0 3`  // 半圆形箭头
    },
    {
        viewBox: "0 0 12 12",
        markerWidth: 40,
        markerHeight: 40,
        refX: 2,
        refY: 3,
        data: `M 4 6, V 0, L 0 3, Z`  // 自定义形状
    }
];

通过选项应用自定义箭头

设置 defaultLineMarker 选项以将自定义箭头应用于所有连线：

const graphOptions: RGOptions = {
    defaultLineMarker: myArrows[myArrowIndex]
};

动态箭头切换

通过更改索引和更新选项来更新箭头样式：

useEffect(() => {
    graphInstance.updateOptions({
        defaultLineMarker: myArrows[myArrowIndex]
    });
}, [myArrowIndex]);

布局切换

在树形和中心布局之间切换并进行适当的形状更改：

const onLayoutNameChanged = async () => {
    if (layoutName === 'center') {
        graphInstance.updateOptions({
            defaultNodeShape: RGNodeShape.circle,
            defaultLineShape: RGLineShape.StandardStraight,
            defaultJunctionPoint: RGJunctionPoint.border,
            layout: { layoutName: layoutName }
        });
    } else {
        graphInstance.updateOptions({
            defaultNodeShape: RGNodeShape.rect,
            defaultLineShape: RGLineShape.StandardCurve,
            defaultJunctionPoint: RGJunctionPoint.lr,
            layout: { layoutName: layoutName }
        });
    }
    await graphInstance.doLayout();
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

箭头选择界面

提供下拉菜单以选择不同的箭头样式：

<SimpleUISelect
    data={[
        { value: 0, text: 'My Arrow 1' },
        { value: 1, text: 'My Arrow 2' },
        { value: 2, text: 'My Arrow 3' },
        { value: 3, text: 'My Arrow 4' }
    ]}
    currentValue={myArrowIndex}
    onChange={(newValue: number) => { setMyArrowIndex(newValue); }}
/>

创意使用场景

• 数据流图：为不同的数据类型使用不同的箭头
• 流程图：用方向指示器表示流程类型
• 网络拓扑：使用不同的箭头显示连接类型
• 状态机：为状态转换使用自定义箭头
• 生物途径：为分子相互作用使用专门的箭头