[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:generate-image-with-background":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在保留画布背景的同时生成图谱图片\n\n## 这个示例构建了什么\n\n这个示例会在 `relation-graph` 中渲染一棵大型的自左向右技术树，并将完整准备好的场景转换为应用内截图预览。视觉结果不仅仅是图结构本身：`.rg-map` 表面使用了分层径向渐变样式，因此导出流程专门设计为在捕获图片时保留画布的视觉处理效果。\n\n用户可以点击 `Generate Image`，在浮动面板中查看生成的位图，拖动该面板到屏幕上的其他位置，将其最小化，并打开一个共享设置浮层来调整滚轮模式、拖拽模式以及执行下载操作。最重要的一点是“先预览再导出”的工作流：这个示例展示了如何捕获带样式的图谱表面，并立即在界面中复用生成的图片。\n\n## 数据是如何组织的\n\n图谱数据是一个静态内联的 `RGJsonData` 对象，在 `initializeGraph()` 内部声明。它使用 `rootId: '2'`，定义了一棵包含 39 个节点和 38 条带标签连线的层级结构，然后再通过 `setJsonData(...)` 交给图实例。\n\n在布局之前没有外部获取数据的过程，也没有转换流水线。唯一的运行时准备步骤是",true,500,1782615435956]