格線

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#ff0000rgb(255, 0, 0)。預設值為 #888。以下是設為 #000#ccc#f00colour 範例:

Snap

snap 屬性是一個布林值,作用是設定區塊是否應貼齊最近的格線點。預設值為 false