本文主要是介绍LogicFlow 学习笔记——6. LogicFlow 基础 网格 Grid,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
网格 Grid
网格是渲染或移动节点时的基本单元。其主要功能是在节点移动过程中,确保每个节点的中心点都精准落在网格点上,这大大有利于节点之间的精确对齐。通常,网格的间距越大,流程图编辑时的对齐越为便捷;反之,间距越小,节点拖动的操作感会更加流畅。
默认情况下,网格是关闭的,最小的渲染/移动单位是1px。如果启用网格功能,则默认的网格大小为20px,这意味着节点在渲染时会以20px为单位进行对齐,移动节点时每次最少移动20px。
注意
设置节点坐标时,系统会根据网格大小调整坐标值,例如,原始坐标设置为{x: 124, y:138}
的节点,实际渲染到画布上的位置会被调整为{x: 120, y: 140}
。因此,在用 LogicFlow 替换项目中旧的流程设计器时,需要对旧数据的坐标进行相应的调整。
在具体的开发过程中,如果需要节点既能中心对齐又能边缘对齐,那么自定义节点的宽高应该是网格尺寸的偶数倍,例如,如果网格尺寸为20px,则节点的宽度应优选为20、40、80、120等偶数倍。
开启网格
在创建画布时,可以通过配置grid
属性来启用网格功能。启用网格并采用默认设置:
const lf = new LogicFlow({grid: true,
});// 默认设置如下
const lf = new LogicFlow({grid: {size: 20,visible: true,type: "dot",config: {color: "#ababab",thickness: 1,},},
});
设置网格属性
可以自定义网格的大小、类型、颜色和线条宽度等属性。
export type GridOptions = {size?: number // 网格大小visible?: boolean, // 是否显示网格线,设置为false则不显示但保留网格效果type?: 'dot' | 'mesh', // 网格类型,可选点状(dot)或线状(mesh)config?: {color: string, // 网格颜色thickness?: number, // 网格线宽度}
};
官方文档
这篇关于LogicFlow 学习笔记——6. LogicFlow 基础 网格 Grid的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!