线条样式定制展示

功能概述

此示例展示了 relation-graph 中的各种线条样式选项，包括不同形状、颜色、宽度、文本定位、箭头样式和连接点。它提供了线条定制功能的全面概述。

核心特性实现

1. 线条形状变化

通过 RGLineShape 枚举使用不同的线条形状：

{
    id: 'line-8',
    from: 'a',
    to: 'f',
    text: 'Line Style 5',
    lineShape: RGLineShape.Curve5  // 各种曲线样式
}

可用形状包括：

RGLineShape.StandardStraight - 直线
RGLineShape.StandardCurve - 标准曲线
RGLineShape.Curve3、RGLineShape.Curve5 - 不同曲线强度
RGLineShape.StandardOrthogonal - 正交（直角）线

2. 线宽和颜色

自定义线条外观：

{
    id: 'line-5',
    from: 'a',
    to: 'd',
    text: 'Thick Line',
    lineWidth: 3,
    color: '#c71585'
}

3. 箭头控制

控制箭头可见性并使用自定义箭头：

{
    id: 'line-6',
    from: 'a',
    to: 'e',
    text: 'Hide Arrow',
    showEndArrow: false
}

4. 连接点

在节点上指定精确的连接点：

{
    id: 'line-13',
    from: 'b',
    to: 'h',
    text: 'Junction Point Example',
    fromJunctionPoint: RGJunctionPoint.right,
    toJunctionPoint: RGJunctionPoint.right
}

5. 路径文本

使文本跟随线路径：

{
    id: 'line-2',
    from: 'a',
    to: 'c',
    text: 'Text on Path',
    useTextOnPath: true,
    fontSize: 10
}

6. 自定义箭头标记

定义并使用自定义 SVG 箭头标记：

{
    id: 'line-18',
    from: 'c',
    to: 'm1',
    text: 'Custom Arrow',
    endMarkerId: 'my-arrow-001',
    startMarkerId: 'my-arrow-001-start',
    showStartArrow: true
}

创意使用场景

流程图：使用不同线条样式创建专业图表
网络拓扑：使用线条样式区分不同连接类型
流程映射：为不同流程类型使用不同线条样式
技术图表：创建具有精确线条控制的工程图
思维导图：使用不同线条样式显示关系类型
数据流可视化：使用方向箭头显示数据移动