Relation Graph

功能概述

此示例演示了画布偏移功能，它允许精确控制画布中心点的位置。通过调整 X 和 Y 坐标偏移量，用户可以平移整个画布，实现图的精确定位。配合坐标网格叠加层，可以直观地看到偏移效果和坐标系关系。

核心特性实现

画布中心点设置

使用 setCanvasCenter 方法设置画布中心点：

useEffect(() => {
    graphInstance.setCanvasCenter(canvasOffsetX, canvasOffsetY);
}, [canvasOffsetX, canvasOffsetY]);

当偏移量状态改变时，自动更新画布中心点位置。

双轴控制

提供 X 和 Y 两个方向的独立控制：

<SimpleUISlider min={-1000} max={1000} step={10} currentValue={canvasOffsetX} onChange={(newValue: number) => { setCanvasOffsetX(newValue); }} />
<SimpleUISlider min={-1000} max={1000} step={10} currentValue={canvasOffsetY} onChange={(newValue: number) => { setCanvasOffsetY(newValue); }} />

滑块范围为 -1000 到 1000，步长为 10，提供精细的控制精度。

坐标网格叠加层

使用 RGSlotOnCanvas 添加自定义网格层：

<RelationGraph options={graphOptions}>
    <RGSlotOnCanvas>
        <div className="absolute left-[-1000px] top-[-1000px]">
            <CoordinateGrid />
        </div>
    </RGSlotOnCanvas>
</RelationGraph>

网格层位于画布下方，帮助用户理解坐标系和偏移效果。

固定布局模式

使用固定布局以便清晰展示偏移效果：

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'fixed'
    }
};

固定布局意味着节点不会自动重新排列，只受画布偏移影响。

实时反馈

显示当前偏移值：

<div className="c-option-name">canvas X: {canvasOffsetX}</div>
<div className="c-option-name">canvas Y: {canvasOffsetY}</div>

用户可以实时看到偏移量的数值变化。

创意使用场景

多图对齐

在显示多个相关图时，使用偏移量精确对齐它们。例如，在比较不同时间段的数据时，保持坐标系一致。

虚拟无限画布

创建大型虚拟工作空间，用户可以在其中导航。偏移功能实现了类似设计软件的无限画布体验。

坐标系转换

在需要将图坐标映射到其他坐标系统时使用偏移。例如，将图对齐到地理坐标或地图图块。

动画和过渡

创建平滑的画布平移动画：

const animateOffset = async (targetX: number, targetY: number) => {
    const startX = canvasOffsetX;
    const startY = canvasOffsetY;
    const duration = 500;
    const startTime = Date.now();

    const animate = () => {
        const elapsed = Date.now() - startTime;
        const progress = Math.min(elapsed / duration, 1);

        setCanvasOffsetX(startX + (targetX - startX) * progress);
        setCanvasOffsetY(startY + (targetY - startY) * progress);

        if (progress < 1) {
            requestAnimationFrame(animate);
        }
    };

    animate();
};

分层显示

在不同层级显示相关信息。通过偏移，可以在主图旁边显示详细的子图或注释。

打印和导出优化

在打印或导出时调整偏移量以获得最佳布局。例如，将图内容居中放置在页面或画布上。

协同编辑

在多人协作编辑图时，每个用户可以有不同的视图偏移，实现独立导航而不影响其他用户的视图。

地图集成

与地图服务集成时，使用偏移量将图坐标映射到地理位置。例如，在地图上叠加网络拓扑图。

画布偏移

画布位置坐标偏移控制