在保留画布背景的同时生成图谱图片

这个示例构建了什么

这个示例会在 relation-graph 中渲染一棵大型的自左向右技术树，并将完整准备好的场景转换为应用内截图预览。视觉结果不仅仅是图结构本身：.rg-map 表面使用了分层径向渐变样式，因此导出流程专门设计为在捕获图片时保留画布的视觉处理效果。

用户可以点击 Generate Image，在浮动面板中查看生成的位图，拖动该面板到屏幕上的其他位置，将其最小化，并打开一个共享设置浮层来调整滚轮模式、拖拽模式以及执行下载操作。最重要的一点是“先预览再导出”的工作流：这个示例展示了如何捕获带样式的图谱表面，并立即在界面中复用生成的图片。

数据是如何组织的

图谱数据是一个静态内联的 RGJsonData 对象，在 initializeGraph() 内部声明。它使用 rootId: '2'，定义了一棵包含 39 个节点和 38 条带标签连线的层级结构，然后再通过 setJsonData(...) 交给图实例。

在布局之前没有外部获取数据的过程，也没有转换流水线。唯一的运行时准备步骤是在挂载时执行初始化序列：加载这段 JSON，然后通过 moveToCenter() 和 zoomToFit() 将图谱重新居中并适配到视口中。

在业务应用中，这种结构同样可以表示子系统拆解、制造流程分支、产品装配结构、设备分解树，或任何其他有向层级关系，只要边上的标签用于说明父子记录之间的关系即可。

relation-graph 是如何使用的

index.tsx 使用 RGProvider 包裹整个示例，这样 MyGraph 和共享的浮动工具组件就能通过 hooks 获取当前图谱上下文。在 MyGraph 中，RGHooks.useGraphInstance() 是初始化和导出行为的主要入口。

RelationGraph 实例被配置为查看器，而不是编辑器。它的选项定义了一个从左向右生长的树形布局、较宽的 levelGaps、白色矩形节点、灰色曲线连线、左右连接点，以及沿路径渲染的连线文本。reLayoutWhenExpandedOrCollapsed 已启用，但这个示例没有添加自定义编辑处理器或图谱变更 UI。

主要实例 API 分两个阶段使用。首先，setJsonData(...)、moveToCenter() 和 zoomToFit() 用于建立初始场景。之后，prepareForImageGeneration() 和 restoreAfterImageGeneration() 会包裹整个截图流程，使图谱能在稳定的导出状态下被捕获。

这个示例还复用了共享辅助组件。DraggableWindow 提供浮动控制窗口，CanvasSettingsPanel 通过 RGHooks.useGraphStore() 读取选项状态，而 setOptions() 会在运行时更新 wheelEventAction 和 dragEventAction。这里还挂载了一个 RGSlotOnView，但它没有注入自定义覆盖内容。

样式是这个示例的重要教学点。导出的外观依赖于 .rg-map 上的 SCSS 覆盖，其中多个径向渐变和白色底色共同构成了预览截图希望保留的背景皮肤。

关键交互

• 点击 Generate Image 会运行完整的导出预览流程：准备图谱画布、使用 modern-screenshot 捕获、将 blob 转成 Base64、恢复图谱状态，并把结果渲染到一个 <img> 中。
• 只有在捕获成功后预览区域才会出现，因此这个浮动面板会成为一个轻量级的查看界面，而不是只用于下载的工具栏。
• 辅助窗口可以通过标题栏拖动，也可以最小化，这样用户就能重新放置导出控件，而不会影响图谱本身。
• 设置浮层可以把鼠标滚轮行为切换为 scroll、zoom 或 none，也可以把画布拖拽行为切换为 selection、move 或 none。
• 同一个设置浮层还提供了共享的 Download Image 路径，但这个示例在 MyGraph.tsx 中真正强调的教学重点仍然是以预览为导向的捕获流程。

关键代码片段

这段代码表明，该示例会先在组件内直接构建一个内联层级结构，再把它传给图实例。

const myJsonData: RGJsonData = {
    rootId: '2',
    nodes: [
        { id: '2', text: 'ALTXX' }, { id: '3', text: 'CH2 TTN' }, { id: '4', text: 'CH1 AlCu' },
        { id: '5', text: 'MainFrame' }, { id: '6', text: 'TestMainSys' }, { id: '7', text: 'Automotive Parts' },
        { id: '8', text: 'Automotive Process' }, { id: '9', text: 'Process Quality Inspection' },

这段代码展示了挂载时的初始化路径：加载数据，并让整张图完整适配到视图中。

await graphInstance.setJsonData(myJsonData);
graphInstance.moveToCenter();
graphInstance.zoomToFit();

这段代码展示了预览导出的生命周期：准备图谱、用透明截图背景进行捕获、恢复图谱状态，并把结果保存下来供界面复用。

const generateImageBase64 = async () => {
    const canvasDom = await graphInstance.prepareForImageGeneration();
    const imageBlob = await domToImageByModernScreenshot(canvasDom, {
        backgroundColor: null
    });
    await graphInstance.restoreAfterImageGeneration();
    if (imageBlob) {
        const base64 = await blobToBase64(imageBlob);
        setBase64String(base64);
    }
};

这段代码展示了定义导出树形视觉语言的图谱选项。

const graphOptions: RGOptions = {
    reLayoutWhenExpandedOrCollapsed: true,
    defaultExpandHolderPosition: 'right',
    defaultNodeShape: RGNodeShape.rect,
    defaultNodeBorderWidth: 1,
    defaultNodeColor: '#fff',
    defaultLineColor: '#666',
    defaultLineShape: RGLineShape.Curve2,
    defaultJunctionPoint: RGJunctionPoint.lr,
    defaultLineTextOnPath: true,

这段代码展示了画布背景来自 .rg-map 上的直接 SCSS 样式，而不是单独的 relation-graph 背景组件。

.rg-map {
    background-image:
        radial-gradient(circle at 51% 46%, rgb(149, 176, 249), rgba(149, 176, 249, 0) 50%),
        radial-gradient(circle at 10% 10%, rgb(114, 226, 253), rgba(114, 226, 253, 0) 50%),
        radial-gradient(circle at 90% 10%, rgb(184, 150, 255), rgba(184, 150, 255, 0) 50%),
        radial-gradient(circle at 90% 90%, rgb(86, 207, 210), rgba(86, 207, 210, 0) 50%),
        radial-gradient(circle at 10% 90%, rgb(168, 112, 253), rgba(168, 112, 253, 0) 50%);
    background-size: 100% 100%;
    background-repeat: repeat;
    background-color: #ffffff;
}

这段代码展示了共享设置面板如何通过当前图实例更新运行时交互模式。

<SettingRow
    label="Wheel Event:"
    options={[
        { label: 'Scroll', value: 'scroll' },
        { label: 'Zoom', value: 'zoom' },
        { label: 'None', value: 'none' },
    ]}
    value={wheelMode}
    onChange={(newValue: string) => { graphInstance.setOptions({ wheelEventAction: newValue }); }}
/>

这个示例的独特之处

根据对比记录，这个示例最具辨识度的地方在于，应将它视为一个“感知背景样式的导出演示”，而不是一般性的样式展示。它的少见组合包括：大型静态树、以预览为先的浮动工具窗口、prepareForImageGeneration() 与 restoreAfterImageGeneration()、modern-screenshot，以及使用 CSS 美化的 .rg-map，其中的径向渐变效果正是希望在捕获流程中保留下来的内容。

与 generate-image-visible-area 相比，当导出的图片需要表示“准备好的完整图谱”而不是用户当前的平移和缩放状态时，这个示例更适合作为参考。与 generate-image-with-watermark 相比，它演示的是保留图谱自身样式化 map 表面，而不是增加独立的 RGBackground 图层。与 canvas-bg2 和 css-theme 相比，它把样式和导出紧密结合起来：重点不在于运行时切换主题，而在于捕获一个已经设计好的图谱表面，并立即进行预览。

稀有度元数据也支持一个更聚焦的判断：在那些已经提供生成图片预览的示例中，这个示例对固定 CSS 画布样式加上 Base64 预览渲染的强调并不常见。它不应被描述为唯一的导出示例，但当输出需求要求保留实时画布皮肤时，它是一个很强的起点。

这种模式还适用于哪里

这种模式很适合那些在下载或发送之前，需要先审核图谱图片的产品流程。例如架构树的审批快照、设备拓扑报告、附加到工单中的子系统图，或者嵌入审计记录中的制造流程图。

当图谱画布本身承载了品牌化或信息性样式，并且这些样式需要在导出资产中保留下来时，这种方式也很有用。构建提案生成器、可打印技术报告、知识图谱缩略图或上传前预览步骤的团队，都可以复用同样的“准备-捕获-恢复”流程，并把静态层级结构替换成自己的业务数据。