线条文本位置和偏移控制

用于在线条上定位文本的综合控件，包括偏移、路径文本以及与各种布局的兼容性。

线条文本位置和偏移控制

功能概述

此示例提供了用于在线条上定位文本的综合控件，包括偏移调整、路径文本功能以及与不同线条形状和布局方向的兼容性。

核心特性实现

1. 文本偏移配置

使用 X 和 Y 偏移控制文本位置：

const graphOptions: RGOptions = {
    defaultLineTextOffsetX: textOffsetX,  // 水平偏移
    defaultLineTextOffsetY: textOffsetY,  // 垂直偏移
    defaultLineTextOnPath: textOnPath,
    defaultLineShape: lineShape
};

2. 动态偏移调整

提供滑块以进行实时偏移控制：

<div>
    Line Text x Offset: {textOffsetX}
    <input
        type="range"
        min="-100"
        max="100"
        value={textOffsetX}
        onChange={(e) => { setTextOffsetX(Number(e.target.value)); }}
    />
</div>

3. 路径文本切换

启用文本跟随曲线：

<SimpleUISelect
    data={[
        { value: 0, text: 'Normal Text' },
        { value: 1, text: 'Text On Path' }
    ]}
    currentValue={textOnPath ? 1 : 0}
    onChange={(newValue: number) => { setTextOnPath(newValue === 1); }}
/>

4. 布局方向控制

测试不同树形布局方向的文本定位：

const updateMyOptions = () => {
    if (layoutFrom === 'left' || layoutFrom === 'right') {
        graphInstance.updateOptions({
            layout: {
                from: layoutFrom,
                treeNodeGapH: 150,
                treeNodeGapV: 30
            }
        });
    } else {
        graphInstance.updateOptions({
            layout: {
                from: layoutFrom,
                treeNodeGapH: 30,
                treeNodeGapV: 150
            }
        });
    }
};

5. 连接点适配

根据线条形状自动调整连接点：

defaultJunctionPoint: lineShape === RGLineShape.StandardStraight
    ? RGJunctionPoint.border
    : ((layoutFrom === 'left' || layoutFrom === 'right')
        ? RGJunctionPoint.lr
        : RGJunctionPoint.tb)

创意使用场景

• 注释图表：向连接添加详细标签
• 技术文档：创建精确的技术图纸
• 教育材料：为学习材料提供清晰的标签
• 数据可视化：在关系线上显示指标
• 流程映射：使用清晰的定位标记流程步骤
• 多语言支持：为不同语言调整文本位置