GridLine 网格线
上一篇
Fullscreen 全屏展示
下一篇
History 历史记录
Loading...
网格线插件为画布提供可视化辅助线，帮助用户精确定位和对齐图形元素，是图形绘制中不可或缺的辅助工具。
网格线插件主要适用于以下场景：
const graph = new Graph({plugins: [{type: 'grid-line',key: 'my-grid-line', // 指定唯一标识符，便于后续动态更新size: 20,stroke: '#0001',follow: true,},],});
createGraph({data: { nodes: [{ id: 'node-1' }] },node: { style: { fill: '#7e3feb' } },edge: { style: { stroke: '#8b9baf' } },layout: { type: 'force' },behaviors: ['drag-canvas'],plugins: [{ type: 'grid-line', key: 'grid-line', size: 30 }],},{ width: 600, height: 300 },(gui, graph) => {const LINE_STYLE = ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset'];const options = {type: 'grid-line',border: true,borderLineWidth: 1,borderStroke: '#eee',borderStyle: 'solid',follow: false,lineWidth: 1,size: 20,stroke: '#eee',};const optionFolder = gui.addFolder('Gird Line Options');optionFolder.add(options, 'type').disable(true);optionFolder.add(options, 'size', 1, 50, 1);optionFolder.add(options, 'lineWidth', 1, 10, 1);optionFolder.addColor(options, 'stroke');optionFolder.add(options, 'border');optionFolder.add(options, 'borderLineWidth', 1, 10, 1);optionFolder.add(options, 'borderStyle', LINE_STYLE);optionFolder.addColor(options, 'borderStroke');optionFolder.add(options, 'follow');optionFolder.onChange(({ property, value }) => {graph.updatePlugin({key: 'grid-line',[property]: value,});graph.render();});},);
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| type | 插件类型 | string | grid-line | ✓ |
| key | 插件唯一标识符，用于后续更新 | string | - | |
| border | 是否显示边框 | boolean | true | |
| borderLineWidth | 边框线宽 | number | 1 | |
| borderStroke | 边框颜色，详细属性参考 CSS border-color | string | #eee | |
| borderStyle | 边框样式，详细属性参考 CSS border-style | string | solid | |
| follow | 是否跟随画布移动 | boolean \｜ {translate ?: boolean, zoom?: boolean} | false | |
| lineWidth | 网格线宽度 | number | string | 1 | |
| size | 网格单元大小，单位为像素 | number | 20 | |
| stroke | 网格线颜色 | string | #eee |
follow 属性用于控制网格线是否跟随画布的变换操作。它支持两种配置方式：
true 时，网格线会同时跟随画布的平移和缩放；设置为 false 时则保持静态。// 同时启用跟随平移和缩放const graph = new Graph({plugins: [{type: 'grid-line',follow: true,},],});
// 仅跟随平移，不跟随缩放const graph = new Graph({plugins: [{type: 'grid-line',follow: {translate: true, // 跟随平移zoom: false, // 不跟随缩放},},],});// 仅跟随缩放，不跟随平移const graph = new Graph({plugins: [{type: 'grid-line',follow: {translate: false, // 不跟随平移zoom: true, // 跟随缩放},},],});
当网格线跟随缩放时，它会保持与画布内容的相对位置关系，使得对齐参考更加精准。跟随平移则让网格随着画布内容一起移动，增强空间连续性的视觉体验。
最简单的方式是直接使用预设配置：
const graph = new Graph({// 其他配置...plugins: ['grid-line'],});
效果如下：
createGraph({data: { nodes: [{ id: 'node-1', style: { x: 150, y: 75 } }] },behaviors: ['drag-canvas'],plugins: ['grid-line'],},{ width: 300, height: 150 },);
您可以根据需要自定义网格线的样式：
const graph = new Graph({// 其他配置...plugins: [{type: 'grid-line',stroke: '#1890ff33', // 蓝色半透明网格线lineWidth: 2,size: 40, // 更大的网格单元borderStroke: '#1890ff', // 蓝色边框borderLineWidth: 2,},],});
效果如下：
createGraph({data: { nodes: [{ id: 'node-1', style: { x: 150, y: 75 } }] },behaviors: ['drag-canvas'],plugins: [{type: 'grid-line',stroke: '#1890ff33', // 蓝色半透明网格线lineWidth: 2,size: 40, // 更大的网格borderStroke: '#1890ff', // 蓝色边框borderLineWidth: 2,},],},{ width: 300, height: 150 },);
启用 follow 选项可以让网格跟随画布移动，增强用户体验：
const graph = new Graph({// 其他配置...behaviors: ['drag-canvas', 'zoom-canvas'],plugins: [{type: 'grid-line',follow: true, // 网格跟随画布移动},],});
试着拖拽/缩放画布，观察网格的跟随效果：
createGraph({data: { nodes: [{ id: 'node-1', style: { x: 150, y: 75 } }] },behaviors: ['drag-canvas', 'zoom-canvas'],plugins: [{type: 'grid-line',follow: true, // 网格跟随画布移动},],},{ width: 300, height: 150 },);
使用 key 标识符可以在运行时动态更新网格属性：
// 初始化配置const graph = new Graph({// 其他配置...plugins: [{type: 'grid-line',key: 'my-grid',size: 20,},],});// 后续动态更新graph.updatePlugin({key: 'my-grid',size: 40, // 更新网格大小stroke: '#ff4d4f', // 更新网格颜色});