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