Relation-Graph 全屏功能API使用指南

Relation-Graph作为一款优秀的关系图可视化工具，提供了丰富的API接口以满足开发者自定义需求。本文将重点介绍如何通过API实现全屏功能，帮助开发者在不使用默认工具栏的情况下，灵活控制关系图的全屏展示。

全屏功能API详解

Relation-Graph提供了简洁而强大的全屏控制API：

graphInstance.fullscreen();

这个API方法既可以实现进入全屏，也可以实现退出全屏，是一个切换式的操作。当关系图处于普通状态时调用此方法会进入全屏模式，反之则会退出全屏。

实现自定义全屏按钮

在实际项目中，开发者往往需要自定义UI界面，这时可以通过以下步骤实现全屏功能：

1. 首先获取Relation-Graph实例
2. 在自定义按钮的点击事件中调用fullscreen()方法
3. 根据需要更新按钮状态（可选）

示例代码片段：

// Vue示例
methods: {
  toggleFullscreen() {
    this.$refs.relationGraph.fullscreen();
    // 可以在这里添加按钮状态切换逻辑
  }
}

进阶应用

除了基本全屏功能外，Relation-Graph还提供了完整的API集合，允许开发者完全自定义工具栏功能。这些API涵盖了缩放、布局切换、节点操作等各个方面，开发者可以根据项目需求自由组合使用。

注意事项

1. 全屏功能依赖于浏览器的全屏API，不同浏览器可能有细微差异
2. 在移动端设备上，全屏行为可能与桌面端有所不同
3. 建议在全屏状态变化时提供视觉反馈，提升用户体验

通过掌握Relation-Graph的全屏API，开发者可以更灵活地控制关系图的展示方式，打造更符合项目需求的交互体验。