研究调查问卷:请告诉我们您使用 Blockly 的体验
开始调查问卷
网格
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
。

如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2023-12-01。
[null,null,["最后更新时间 (UTC):2023-12-01。"],[[["Blockly workspaces can have an optional grid to help organize blocks, especially in larger projects."],["The grid is customizable with properties like spacing, length, color, and snap, which are configured within Blockly's options."],["Grid spacing controls the distance between grid points, length determines the visual shape of grid points, color sets the color of the grid, and snap enables or disables block snapping to the grid."]]],["Blockly's workspace grid is configured via `spacing`, `length`, `colour`, and `snap` properties within the workspace configuration. `Spacing` defines the distance between grid points, with a default of 0 (no grid). `Length` shapes the grid points (dots, crosses, or graph paper). `Colour` sets the grid's color using CSS formats. `Snap` determines if blocks align to the grid, defaulting to `false`. Activating snap enables a more organized layout.\n"]]