自定义连线内容与图案填充

演示如何使用 SVG 图案和连线插槽自定义创建具有丰富视觉效果的自定义连线。

自定义连线内容与图案填充

功能概述

此示例演示如何使用 SVG 图案和 RGSlotOnLine 组件创建具有丰富视觉效果的自定义连线。连线可以显示各种装饰图案，包括点、条纹、网格等。

核心特性实现

SVG 图案定义

使用 <defs> 和 <pattern> 元素定义可重用的 SVG 图案：

• 图案点：粉红色点状图案
• 图案条纹：蓝色条纹图案
• 图案网格：绿色网格图案
• 自定义图案：警告条纹、赛博网格、电路、熔岩、迪斯科点、波浪、箭头、彩虹

<MySvgDefs />
<!-- 在 MySvgDefs 内部:
<defs>
  <pattern id="pattern-dots" ...>
  <pattern id="pattern-stripe" ...>
  等
</defs>
-->

连线填充样式的 CSS 变量

使用 CSS 自定义属性动态应用选定的图案：

<div style={{
    '--rg-line-fill-style': fillStyleId ? `url(#${fillStyleId})` : 'rgba(255,255,255,0.47)'
}}>

连线插槽自定义

使用 RGSlotOnLine 为每条连线渲染自定义内容：

<RGSlotOnLine>
    {({ lineConfig, checked }: RGLineSlotProps) => (
        <MyLineContent lineConfig={lineConfig} checked={checked} />
    )}
</RGSlotOnLine>

图案选择界面

提供下拉菜单选择不同的填充图案：

<SimpleUISelect
    data={[
        { value: '', text: 'Color' },
        { value: 'pattern-dots', text: '🔮 Pink dots' },
        { value: 'pattern-stripe', text: '🌊 Blue stripes' },
        { value: 'pattern-grid', text: '🌐 Green grid' },
        // ... 更多图案
    ]}
    currentValue={fillStyleId}
    onChange={(newValue: string) => { setFillStyleId(newValue); }}
/>

树形布局配置

配置树形布局以进行分层显示：

const graphOptions: RGOptions = {
    defaultNodeShape: RGNodeShape.rect,
    defaultJunctionPoint: RGJunctionPoint.border,
    defaultLineColor: '#2E74B5',
    defaultNodeColor: '#ffffff',
    layout: {
        layoutName: 'tree',
        treeNodeGapH: 200,
        treeNodeGapV: 50
    }
};

创意使用场景

• 电路图：使用电路或网格图案绘制技术原理图
• 流程图：应用警告条纹或方向箭头显示流程
• 交通网络：使用类道路图案可视化路线
• 数据管道：使用动画或图案连线显示数据流
• 艺术图表：创建具有装饰图案的视觉震撼图表