线条形状和连接点控制

用于实验不同线条形状、连接点和文本定位选项的交互式控件。

线条形状和连接点控制

功能概述

此示例提供了用于实验不同线条形状和连接点配置的交互式控件。它帮助用户了解这些参数如何影响各种场景下的线条渲染。

核心特性实现

1. 动态线条形状选择

在不同的线条形状之间切换：

const [lineShape, setLineShape] = React.useState<RGLineShape>(RGLineShape.StandardCurve);

const updateMyGraphData = async () => {
    graphInstance.getLines().forEach((line) => {
        graphInstance.updateLine(line, {
            lineShape,
            fromJunctionPoint: lineShape === RGLineShape.StandardStraight
                ? RGJunctionPoint.border
                : lineJunctionPoint,
            toJunctionPoint: lineShape === RGLineShape.StandardStraight
                ? RGJunctionPoint.border
                : lineJunctionPoint
        });
    });
};

2. 连接点选项

配置线条连接到节点的位置：

const [lineJunctionPoint, setLineJunctionPoint] = React.useState<RGunctionPoint>(RGJunctionPoint.border);

// 可用选项：
// - RGJunctionPoint.border - 连接到节点边界
// - RGJunctionPoint.ltrb - 左、上、右、下
// - RGJunctionPoint.lr - 仅左/右
// - RGJunctionPoint.tb - 仅上/下
// - RGJunctionPoint.left - 仅左侧
// - RGJunctionPoint.top - 仅顶部
// - RGJunctionPoint.right - 仅右侧
// - RGJunctionPoint.bottom - 仅底部

3. 路径文本切换

启用文本跟随线路径：

const [textOnPath, setTextOnPath] = React.useState<boolean>(false);

graphInstance.updateLine(line, {
    useTextOnPath: textOnPath
});

4. 条件 UI 显示

仅在相关时显示连接点选项：

{lineShape !== RGLineShape.StandardStraight && (
    <div>
        <div>Line JunctionPoint:</div>
        <SimpleUISelect
            data={[
                { value: RGJunctionPoint.border, text: 'Border' },
                { value: RGJunctionPoint.ltrb, text: 'Left/Top/Right/Bottom' },
                // ... 更多选项
            ]}
            onChange={setLineJunctionPoint}
            currentValue={lineJunctionPoint}
        />
    </div>
)}

5. 力布局以实现自然定位

使用力布局让节点找到最佳位置：

layout: {
    layoutName: 'force',
    maxLayoutTimes: 50
}

创意使用场景

• 设计探索：试验不同的线条样式以获得最佳可视化
• 用户自定义：允许用户选择他们喜欢的线条样式
• 打印优化：针对不同的输出格式调整线条样式
• 辅助功能：选择更清晰的线条样式以提高可见性
• 主题变化：为不同的图主题使用不同的线条样式
• 比较分析：比较不同线条样式如何影响图的可读性