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