正交线上的文本 - 直角连接路径上的标签

正交路径文本标签

功能概���

本示例显示正交（直角）连接路径上的文本标签。标签定位在路径上的最佳点，自动旋转以匹配路径方向。对于需要清晰、专业外观的技术图表和结构化布局很有用。

核心特性实现

带有文本的正交连线

const graphOptions: RGOptions = {
    defaultLineShape: RGLineShape.StandardOrthogonal,
    defaultLineTextOnPath: true,
    // 正交路径上的文本
};

文本位置计算

const getOrthogonalTextPosition = (line: RGLine) => {
    // 查找文本的水平或垂直段
    if (Math.abs(line.x1 - line.x2) > Math.abs(line.y1 - line.y2)) {
        return {
            x: (line.x1 + line.x2) / 2,
            y: line.y1,
            rotate: 0
        };
    } else {
        return {
            x: line.x1,
            y: (line.y1 + line.y2) / 2,
            rotate: 90
        };
    }
};

创意使用场景

电路图：带有正交导线的整洁技术图纸。

平面图：带有直角路径的房间连接。

网络图：专业的 IT 基础设施地图。

工程图纸：CAD 风格的技术图表。

组织架构图：结构化的企业层级。