只生成可见区域的图片
生成可见图谱区域截图
本示例演示如何生成图谱当前可见区域的截图（作为 base64 图片），而不是整个画布。用户可以平移和缩放图谱以调整所需视图，然后生成捕获其确切所见内容的图片。该示例还提供了控制是否在生成的截图中包含工具栏和缩略图的选项。
关键特性包括：通过 graphInstance.$dom 访问画布 DOM 元素、图片生成前的动态组件可见性控制、匹配的背景色图片生成、截图后的状态恢复，以及 RGMiniView 组件的条件渲染。该示例演示了演示文稿导出、交互式文档和具有选择性组件包含的自定义导出控制。
生成可见图谱区域截图
功能概述
本示例演示如何生成图谱当前可见区域的截图（作为 base64 图片），而不是整个画布。用户可以平移和缩放图谱以调整所需视图，然后生成捕获其确切所见内容的图片。该示例还提供了控制是否在生成的截图中包含工具栏和缩略图的选项。
核心特性实现
访问画布 DOM 元素
图谱实例通过 graphInstance.$dom 提供对画布 DOM 元素的直接访问：
const generateImageBase64 = async () => {
const canvasDom = graphInstance.$dom;
// ... 从 canvasDom 生成图片
};
此属性为您提供包含图谱可视化的实际 HTMLElement。
动态组件可见性控制
在生成图片之前，示例更新选项以控制组件可见性：
graphInstance.updateOptions({
showToolBar: toolbarVisibleInImage
});
await graphInstance.sleep(100); // 等待渲染
const orignMiniViewVisible = miniViewVisible;
setMiniViewVisible(miniViewVisibleInImage);
await graphInstance.sleep(100); // 等待渲染
这种方法允许用户在截图中排除 UI 元素（如工具栏），同时在交互期间保持可见。
带背景色的图片生成
使用 domToImageByModernScreenshot 辅助函数生成图片：
const imageBlob = await domToImageByModernScreenshot(canvasDom, {
backgroundColor: graphInstance.getOptions().backgroundColor
});
设置背景颜色确保图片与图谱的视觉外观匹配，当画布具有非白色背景时尤为重要。
状态恢复
生成图片后，恢复原始状态：
setMiniViewVisible(orignMiniViewVisible);
graphInstance.updateOptions({
showToolBar: true
});
这确保 UI 在截图生成后返回其原始状态。
缩略图条件渲染
缩略图通过视图 slot 条件渲染：
<RelationGraph options={graphOptions}>
<RGSlotOnView>
{miniViewVisible && <RGMiniView />}
</RGSlotOnView>
</RelationGraph>
此模式允许由 React 状态控制的动态组件可见性。
创意使用场景
演示文稿导出
可见区域截图支持：
- 幻灯片生成：捕获演示文稿的特定图谱视图
- 报告生成：在文档中包含聚焦的图谱部分
- 缩略图预览：创建图谱配置的小预览图像
- 社交分享：在社交媒体上分享有趣的图谱视图
交互式文档
截图功能支持：
- 教程创建：捕获图谱探索的具体步骤
- 用户指南：向用户准确展示他们应该看到的内容
- 错误报告：报告问题时捕获当前视图
- 功能演示：创建动态可视化的静态图像
自定义导出控制
选择性组件包含允许：
- 清洁导出：排除 UI 控件以获得专业输出
- 注释截图：包含工具栏以显示上下文
- 多格式导出：为不同目的生成不同版本
- 用户偏好：让用户选择导出中包含的内容