网格

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#ff0000rgb(255, 0, 0)。默认值为 #888。 以下是设置为 #000#ccc#f00colour 的示例:

贴靠

snap 属性是一个布尔值,用于设置在将块放置在工作区上时是否应贴靠最近的网格点。默认值为 false