Blockly 的主工作区可以选择性地包含网格。可以设置块以贴靠网格,从而实现更清晰的布局。对于大型应用(其中有多个代码分组分布在一大片区域),这种做法尤其有用。
网格的设置由属于 Blockly 配置的对象定义。示例如下:
var workspace = Blockly.inject('blocklyDiv', {toolbox: document.getElementById('toolbox'), grid: {spacing: 20, length: 3, colour: '#ccc', snap: true}, trashcan: true});
间距
最重要的网格属性是 spacing
,用于定义网格点之间的距离。默认值为 0,表示没有网格。以下是设置为 10、20 和 40 的 spacing
的示例:
时长
length
属性是一个数字,用于定义网格点的形状。长度为 0 会产生不可见的网格(但仍可被贴靠到网格),长度为 1(默认值)会产生点,长度越长就会产生十字形,长度等于或大于间距得到的图表纸张。以下是设置为 1、5 和 20 的 length
的示例:
颜色
colour
属性是一个用于设置点颜色的字符串。请注意英式拼写。使用任何与 CSS 兼容的格式,包括 #f00
、#ff0000
或 rgb(255, 0, 0)
。默认值为 #888
。
以下是设置为 #000
、#ccc
和 #f00
的 colour
的示例:
贴靠
snap
属性是一个布尔值,用于设置在将块放置在工作区上时是否应贴靠最近的网格点。默认值为 false
。