ggEditor流程图增加网格背景

参考官方文档：

https://www.yuque.com/antv/g6/plugin.tool.grid

 

react-ggEditor如何使用

import { Flow } from 'gg-editor';

....

 const gird = {

        cell:20,

        type:'line',

        line:{

          color:'#f7f7f7',

          fill:'#f7f7f7',

          stroke: '#f7f7f7',

          lineWidth: 0.1

        }

}

<Flow 
                grid={gird}
                className='flow' 
                data={data} />
  ....             

 

栅格 plugin.tool.grid

简介

 

该插件可在画布区域绘制网格。

 

 

安装

 

在 HTML 中引用文件：

 

<script src="https://unpkg.com/@antv/g6/build/plugin.tool.grid.js"></script>

 

在 npm 中引用：

 

import '@antv/g6/build/plugin.tool.grid';

 

参数

参数	说明	类型	可选值	默认值
cell	网格稀疏程度	number		16
type	网格类型	string	dot line	'dot'
line	网格线样式	object	通用图形属性	{  stroke: '#A3B1BF',  lineWidth: 0.5 }

 

使用

 

实例化插件对象：

 

const grid = new G6.Plugins['tool.grid']();

 

在实例化 Graph 时作为插件插入：

 

const graph = new G6.Graph({   container: 'mountNode',  plugins: [ grid ] });