生成透明背景的图谱图片

本示例演示如何生成具有透明背景的图谱截图。使用 prepareForImageGeneration 和 restoreAfterImageGeneration 方法，图谱会自动准备图像捕获并在之后恢复其状态。生成的图片可用作其他应用程序或文档中的叠加层，其中需要透明度。

关键特性包括：使用专用图谱实例方法的准备和恢复模式、使用 backgroundColor: null 的透明背景配置、使用 levelGaps 数组的宽水平间距树状布局。该示例演示了文档和网站的叠加和合成、图标和贴纸的设计资源创建，以及 PNG 和 SVG 集成的多格式导出。

生成透明背景的图谱图片

功能概述

本示例演示如何生成具有透明背景的图谱截图。使用 prepareForImageGeneration 和 restoreAfterImageGeneration 方法，图谱会自动准备图像捕获并在之后恢复其状态。生成的图片可用作其他应用程序或文档中的叠加层，其中需要透明度。

核心特性实现

准备和恢复模式

图谱实例为图像生成工作流提供专用方法：

const generateImageBase64 = async () => {
    // 准备图谱以生成图像
    const canvasDom = await graphInstance.prepareForImageGeneration();

    // 生成具有透明背景的图像
    const imageBlob = await domToImageByModernScreenshot(canvasDom, {
        backgroundColor: null // null = 透明
    });

    // 生成后恢复图谱状态
    await graphInstance.restoreAfterImageGeneration();

    if (imageBlob) {
        const base64 = await blobToBase64(imageBlob);
        setBase64String(base64);
    }
};

此模式确保在图像生成过程中正确的状态管理。

透明背景配置

在图像生成选项中设置 backgroundColor: null 创建透明背景：

const imageBlob = await domToImageByModernScreenshot(canvasDom, {
    backgroundColor: null
});

当图片需要与其他背景合成时，这特别有用。

树状布局配置

图谱使用具有宽水平间距的树状布局：

const graphOptions: RGOptions = {
    reLayoutWhenExpandedOrCollapsed: true,
    defaultExpandHolderPosition: 'right',
    defaultNodeShape: RGNodeShape.rect,
    defaultNodeBorderWidth: 1,
    defaultNodeColor: '#fff',
    defaultLineColor: '#666',
    defaultLineShape: RGLineShape.Curve2,
    defaultJunctionPoint: RGJunctionPoint.lr,
    defaultLineTextOnPath: true,
    layout: {
        layoutName: 'tree',
        from: 'left',
        levelGaps: [400, 400, 400, 400]
    }
};

levelGaps 数组控制树级别之间的间距，创建水平扩展的结构。

创意使用场景

叠加和合成

透明背景图片支持：

• 文档叠加：将图谱放置在文档内容上而无需白色边框
• 网站集成：将图谱无缝嵌入网页
• 视频制作：在视频编辑中使用图谱作为叠加层
• 演示图层：在演示背景上添加图谱

设计资源创建

透明导出支持：

• 图标集：为 UI 设计创建基于图标的图标
• 贴纸包：生成可共享的图谱插图
• 模板资源：构建可重用的图谱组件
• 品牌材料：将图谱整合到品牌材料中

多格式导出

准备/恢复模式有助于：

• PNG 导出：具有透明度的无损压缩
• SVG 集成：基于矢量的导出以实现可扩展性
• 批处理：使用一致的设置生成多个图像
• 自动化工作流：集成到构建管道或 CI/CD 中