[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:export-visible-graph-area-image":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 将当前可见的图区域捕获为图片\n\n## 这个示例构建了什么\n\n这个示例构建了一个查看器风格的 relation graph，并带有一个用于生成截图的浮动工具窗口。画布中展示的是一个紧凑的蓝色图，包含圆形节点、关系连线、右上角的内置工具栏，以及可选的缩略图叠加层。\n\n核心工作流是依赖当前视口的捕获。在用户平移或缩放图之后，这个示例可以精确地从当前可见的图区域生成图片，而不是导出一张预先准备好的完整场景图片。同一个面板还会以内联方式显示生成结果，包括图片预览和 Base64 字符串。\n\n## 数据是如何组织的\n\n图数据在 `initializeGraph` 中以内联方式声明为一个 `RGJsonData` 对象。它使用 `rootId`、扁平的 `nodes` 数组和扁平的 `lines` 数组，因此这个示例不会在加载前请求远程数据，也不会对独立的业务 schema 做转换。\n\n这里几乎没有预处理。组件挂载后，会构建这个静态数据对象，将其传给 `setJsonData`，然后把图重新居中并缩放到适配视图。在生产系统中，同样的数据形态可以表示设备层级、产品结构、流程拆解、依赖树，或任何其他",true,500,1782615435537]