Blockly 的主要工作區可以選擇是否採用格狀檢視。您可以調整區塊並貼齊格線,讓版面配置更簡潔。對大型應用程式且具有多個程式碼群組的大型應用程式而言,這項功能特別實用。
格線設定由 Blockly 設定中的物件定義。範例如下:
var workspace = Blockly.inject('blocklyDiv', {toolbox: document.getElementById('toolbox'), grid: {spacing: 20, length: 3, colour: '#ccc', snap: true}, trashcan: true});
間距
最重要的格線屬性為 spacing
,這會定義格線點之間的距離。預設值為 0,因此不會產生格狀檢視。以下列舉 spacing
設為 10、20 和 40 的範例:
長度
length
屬性是定義格線點形狀的數字。如果長度為 0,則會產生不可見的格線 (但仍有可能對齊至的格線),長度 1 (預設值) 會產生點,長度越長則會產生交錯效果,而長度等於或大於間距,在圖形紙上則會產生相同結果。以下列舉 length
設為 1、5 和 20 的範例:
顏色
colour
屬性是設定點顏色的字串。注意英式拼法。請使用任何與 CSS 相容的格式,包括 #f00
、#ff0000
或 rgb(255, 0, 0)
。預設值為 #888
。以下是設為 #000
、#ccc
和 #f00
的 colour
範例:
Snap
snap
屬性是一個布林值,作用是設定區塊是否應貼齊最近的格線點。預設值為 false
。