画布的网格

基础用法

引入 <Grid /> 组件后, 即可设置 <XFlowGraph /> 的画布网格

<XFlow>
  ...
  <Grid type="mesh" options={{ color: '#ccc', thickness: 1 }} />
</XFlow>

网格大小

通过设置 size 属性可以控制网格大小,网格默认大小为 10px，渲染节点时表示以 10 为最小单位对齐到网格，如位置为 { x: 24, y: 38 }的节点渲染到画布后的实际位置为 { x: 20, y: 40 }， 移动节点时表示每次移动最小距离为 10px。

网格隐藏

添加 visible 属性即可让网格处于隐藏状态

点状网格

type 属性为 dot 的点状网格, 通过 options 属性来设置网格颜色和宽度

固定网点大小的点状网格

type 属性为 fixedDot 的固定网点大小的点状网格类型, 通过 options 属性来设置网格颜色和宽度。 注意： 当画布的缩放比例小于 1 时，网点大小随着画布缩放比例缩放，当画布缩放比例大于 1 时，网点大小为给定的 thickness 的值。

网状网格

type 属性为 mesh 的网状网格, 通过 options 属性来设置网格颜色和宽度

双线网状网格

type 属性为 doubleMesh 的双网线网格, 通过 options 属性来设置主次网格线的颜色和宽度

API

Grid

options 对应的 args 参数如下: