GridLine
Previous
Fullscreen
Next
History
Loading...
The GridLine plugin provides visual auxiliary lines for the canvas, helping users precisely position and align graphic elements. It is an indispensable tool in graphic drawing.
The GridLine plugin is mainly suitable for the following scenarios:
Below is a simple example of initializing the GridLine plugin:
const graph = new Graph({plugins: [{type: 'grid-line',key: 'my-grid-line', // Specify a unique identifier for dynamic updatessize: 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();});},);
| Property | Description | Type | Default | Required |
|---|---|---|---|---|
| type | Plugin type | string | grid-line | ✓ |
| key | Unique identifier for the plugin, used to get the plugin instance or update plugin options | string | - | |
| border | Whether to display the border | boolean | true | |
| borderLineWidth | Border line width | number | 1 | |
| borderStroke | Border color, see CSS border-color | string | #eee | |
| borderStyle | Border style, see CSS border-style | string | solid | |
| follow | Whether to follow canvas movements | boolean | {translate ?: boolean, zoom?: boolean} | false | |
| lineWidth | Grid line width | number | string | 1 | |
| size | Grid unit size in pixels | number | 20 | |
| stroke | Grid line color | string | #eee |
The follow property controls whether the grid lines follow the canvas transformations. It supports two configuration methods:
true, the grid lines follow both canvas translation and zoom; when set to false, they remain static.// Enable both translation and zoom followingconst graph = new Graph({plugins: [{type: 'grid-line',follow: true,},],});
// Follow translation only, not zoomconst graph = new Graph({plugins: [{type: 'grid-line',follow: {translate: true, // Follow translationzoom: false, // Do not follow zoom},},],});// Follow zoom only, not translationconst graph = new Graph({plugins: [{type: 'grid-line',follow: {translate: false, // Do not follow translationzoom: true, // Follow zoom},},],});
When grid lines follow zoom, they maintain a relative position to the canvas content, making alignment references more precise. Following translation allows the grid to move with the canvas content, enhancing the visual experience of spatial continuity.
The simplest way is to use the preset configuration directly:
const graph = new Graph({// Other configurations...plugins: ['grid-line'],});
The effect is as follows:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 300,height: 150,data: { nodes: [{ id: 'node-1', style: { x: 150, y: 75 } }] },behaviors: ['drag-canvas'],plugins: ['grid-line'],});graph.render();
You can customize the grid line style as needed:
const graph = new Graph({// Other configurations...plugins: [{type: 'grid-line',stroke: '#1890ff33', // Blue semi-transparent grid linelineWidth: 2,size: 40, // Larger grid unitborderStroke: '#1890ff', // Blue borderborderLineWidth: 2,},],});
The effect is as follows:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 300,height: 150,data: { nodes: [{ id: 'node-1', style: { x: 150, y: 75 } }] },behaviors: ['drag-canvas'],plugins: [{type: 'grid-line',stroke: '#1890ff33', // Blue semi-transparent grid linelineWidth: 2,size: 40, // Larger gridborderStroke: '#1890ff', // Blue borderborderLineWidth: 2,},],});graph.render();
Enabling the follow option allows the grid to move with the canvas, enhancing user experience:
const graph = new Graph({// Other configurations...behaviors: ['drag-canvas', 'zoom-canvas'],plugins: [{type: 'grid-line',follow: true, // Grid follows canvas movement},],});
Try dragging/zooming the canvas to observe the grid following effect:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 300,height: 150,data: { nodes: [{ id: 'node-1', style: { x: 150, y: 75 } }] },behaviors: ['drag-canvas', 'zoom-canvas'],plugins: [{type: 'grid-line',follow: true, // Grid follows canvas movement},],});graph.render();
Use the key identifier to dynamically update grid properties at runtime:
// Initial configurationconst graph = new Graph({// Other configurations...plugins: [{type: 'grid-line',key: 'my-grid',size: 20,},],});// Subsequent dynamic updatesgraph.updatePlugin({key: 'my-grid',size: 40, // Update grid sizestroke: '#ff4d4f', // Update grid color});