Relation Graph

功能概述

此示例演示了如何将整个图可视化为图像导出，而不管当前的缩放级别或视口位置如何。导出以全分辨率捕获完整的图内容，使其非常适合创建高质量的文档、演示文稿或共享可视化。该演示将"下载图像"按钮集成到工具栏中，并展示如何正确处理导出工作流程。

核心特性实现

图像导出 API

核心导出功能使用 prepareForImageGeneration 方法：

const downloadImage = async () => {
    const canvasDom = await graphInstance.prepareForImageGeneration();
    const imageBlob = await domToImageByModernScreenshot(canvasDom, {
        backgroundColor: '#ffffff'
    });
    if (imageBlob) {
        downloadBlob(imageBlob, 'my-image-name');
    }
    await graphInstance.restoreAfterImageGeneration();
};

该过程涉及三个步骤：准备画布、捕获图像和恢复图状态。

自定义工具栏按钮

下载按钮添加到迷你工具栏：

<RGMiniToolBar positionV='bottom' direction='v'>
    <div
        className="w-8 h-8 border rounded flex place-items-center justify-center bg-red-700 animate-pulse text-white cursor-pointer hover:text-yellow-200 hover:animate-none"
        onClick={downloadImage}
    >
        <ImageIcon size={20} />
    </div>
</RGMiniToolBar>

按钮使用脉动动画以吸引对导出功能的注意。

背景颜色配置

图像导出包括白色背景以获得更好的可见性：

const imageBlob = await domToImageByModernScreenshot(canvasDom, {
    backgroundColor: '#ffffff'
});

这确保导出的图像无论原始图背景如何都看起来不错。

导出期间的状态管理

该演示在导出后正确处理状态恢复：

await graphInstance.restoreAfterImageGeneration();

这对于在图像生成所做的临时修改后保持图的交互状态至关重要。

与第三方截图库集成

该演示使用 modern-screenshot 进行实际图像捕获：

import { domToImageByModernScreenshot, downloadBlob } from '../simples-common-components/domToImageByModernScreenshot';

Relation-graph 提供准备好的 DOM 元素，但可以使用任何截图库。

创意使用场景

文档生成

自动生成始终显示完整图的文档图像。对于需要最新可视化的 API 文档、技术报告或系统架构文档很有用。

演示幻灯片

创建带有图可视化的演示幻灯片。导出确保高分辨率图像，在投影或打印时看起来很专业，无论图如何被查看。

社交媒体共享

使用户能够在社交媒体上共享有趣的图可视化。导出创建适合 Twitter、LinkedIn 或其他平台的清晰、完整的图像。

自动报告生成

集成到定期生成带有嵌入式图可视化的状态报告的自动报告系统中。导出可以按计划触发。

图比较和版本控制

在不同时间点导出图以创建演化的视觉记录。对于在演示文稿或存档中显示增长、变化或比较很有用。

打印和发布

创建用于出版、海报或物理报告的打印就绪的图图像。导出以全分辨率捕获所有内容，确保打印时的质量。

协作审查

导出图以包含在设计审查、利益相关者演示或客户交付物中。一致的图像格式确保每个人都看到相同的可视化。

图谱内容生成图片