生成带自定义背景水印的图谱图片

本示例演示如何生成带有自定义背景图案（水印）的图谱截图。使用 RGBackground slot，应用带有半透明橙色叠加层的网格图案到画布。生成的图片同时捕获图谱内容和自定义背景，适用于品牌化或为导出的图片添加视觉上下文。

关键特性包括：用于自定义背景渲染的 RGBackground slot、用于网格图案的 base64 编码背景图片、结合网格纹理与半透明色调的分层背景样式，以及使用准备/恢复模式保留背景的图片生成。该示例演示了带有水印和徽标的品牌导出、带有网格叠加的上下文可视化，以及印刷和营销材料的设计集成。

生成带自定义背景水印的图谱图片

功能概述

本示例演示如何生成带有自定义背景图案（水印）的图谱截图。使用 RGBackground slot，应用带有半透明橙色叠加层的网格图案到画布。生成的图片同时捕获图谱内容和自定义背景，适用于品牌化或为导出的图片添加视觉上下文。

核心特性实现

RGBackground Slot 用于自定义背景

RGBackground slot 允许自定义背景渲染：

<RelationGraph options={graphOptions}>
    <RGSlotOnView>
    </RGSlotOnView>
    <RGBackground>
        <div
            style={{
                width: '100%',
                height: '100%',
                backgroundImage: 'url(data:image/png;base64,...)',
                backgroundSize: '200px 200px',
                backgroundRepeat: 'repeat',
                backgroundColor: 'rgba(246, 167, 87, 0.1)'
            }}
        />
    </RGBackground>
</RelationGraph>

背景 div 跨越整个画布区域，可以包含任何 CSS 样式。

Base64 编码的背景图片

示例使用 base64 编码的 PNG 图片作为网格图案：

backgroundImage: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGuCAYAAAC+z1AR...)'

这种方法将背景图片直接嵌入代码中，避免外部文件依赖。

分层背景样式

背景组合了多个视觉元素：

• 网格图案：提供网格纹理的 base64 编码 PNG
• 色调颜色：半透明橙色叠加层（rgba(246, 167, 87, 0.1)）
• 平铺：backgroundRepeat: 'repeat' 用于无缝覆盖
• 尺寸：backgroundSize: '200px 200px' 控制图案尺寸

保留背景的图片生成

使用相同的准备/恢复模式：

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);
    }
};

自定义背景自动包含在生成的图片中。

创意使用场景

品牌导出

自定义背景支持：

• 公司水印：为导出添加徽标或微妙品牌标识
• 文档分类：机密/内部/公开的视觉指示器
• 版权保护：微妙水印以保护知识产权
• 模板一致性：确保所有导出遵循品牌指南

上下文可视化

背景图案支持：

• 网格叠加：显示比例或测量参考
• 主题背景：匹配图谱用途（技术、艺术、企业）
• 视觉层次：使用背景区分不同图谱类型
• 状态指示：颜色色调显示图谱状态（草稿、已批准、已归档）

设计集成

水印功能有助于：

• 印刷设计：为印刷材料准备图谱
• 演示图形：匹配演示模板样式
• 营销材料：为营销用途创建品牌可视化
• 用户生成内容：让用户根据自己的需求自定义背景