在前面的章節中，我們已經了解了 Blockly 的基本概念，並完成了安裝與設置。本章將深入探討 Blockly 的基本使用方法，包括工作區介面、積木類型、工具箱配置、工作區配置以及主題設定等方面。
Blockly 工作區是使用者拖曳和連接積木的主要區域。它由以下幾個主要部分組成：
工具箱（Toolbox）：位於工作區左側，包含可用的積木類別和積木。使用者可以從工具箱中拖曳積木到工作區。
積木區域：工作區的主要部分，使用者可以在這裡拖曳、連接和組織積木。
垃圾桶：位於工作區右下角，用於刪除不需要的積木。使用者可以將積木拖曳到垃圾桶中刪除，或者右鍵點擊積木選擇刪除選項。
縮放控制：位於工作區右下角，用於放大或縮小工作區視圖。
Blockly 提供了多種類型的積木，每種類型都有特定的形狀和功能。以下是一些常見的積木類型：
值積木用於表示數值、文字、布林值等數據。它們通常有圓角的外形，可以插入到其他積木的值輸入槽中。
例如，數字積木、文字積木、布林積木等都是值積木。
語句積木用於表示程式中的語句或指令。它們通常有上下連接點，可以垂直連接形成程式的執行流程。
例如，條件判斷積木、迴圈積木、函數定義積木等都是語句積木。
事件積木用於響應特定事件，如點擊按鈕、按下鍵盤等。它們通常是程式的入口點，沒有上連接點，只有下連接點。
例如，「當程式啟動時」、「當按鈕被點擊時」等都是事件積木。
使用者可以通過拖曳積木來連接或分離它們：
連接積木：將一個積木拖曳到另一個積木的連接點附近，當出現連接提示時，鬆開滑鼠即可連接。
分離積木：點擊並拖曳要分離的積木，將其從當前位置拖離即可。
複製積木：按住 Ctrl 鍵（Mac 上是 Cmd 鍵）並拖曳積木，可以創建該積木的副本。
工具箱是 Blockly 工作區中包含所有可用積木的面板。您可以根據需要自定義工具箱的內容和外觀。
工具箱可以通過 JSON 配置來定義。以下是一個基本的工具箱配置示例：
const toolbox = {
kind: 'categoryToolbox',
contents: [
{
kind: 'category',
name: '邏輯',
colour: '%{BKY_LOGIC_HUE}',
contents: [
{
kind: 'block',
type: 'controls_if'
},
{
kind: 'block',
type: 'logic_compare'
},
{
kind: 'block',
type: 'logic_operation'
},
{
kind: 'block',
type: 'logic_negate'
},
{
kind: 'block',
type: 'logic_boolean'
}
]
},
{
kind: 'category',
name: '迴圈',
colour: '%{BKY_LOOPS_HUE}',
contents: [
{
kind: 'block',
type: 'controls_repeat_ext'
},
{
kind: 'block',
type: 'controls_whileUntil'
},
{
kind: 'block',
type: 'controls_for'
},
{
kind: 'block',
type: 'controls_forEach'
}
]
},
// 更多類別...
]
};Blockly 支援兩種類型的工具箱：
類別工具箱（Category Toolbox）：將積木分組到不同的類別中，使用者可以點擊類別查看其中的積木。適合包含大量積木的情況。
簡單工具箱（Simple Toolbox）：直接顯示所有積木，沒有分類。適合只有少量積木的簡單應用。
您可以在運行時動態更新工具箱的內容：
// 獲取工作區
const workspace = Blockly.getMainWorkspace();
// 更新工具箱
const newToolboxConfig = {
// 新的工具箱配置...
};
workspace.updateToolbox(newToolboxConfig);除了工具箱外，您還可以配置工作區的其他方面，如網格、縮放、滾動條等。
您可以配置工作區的網格，包括是否顯示網格、網格間距、網格顏色等：
const workspace = Blockly.inject('blocklyDiv', {
toolbox: toolbox,
grid: {
spacing: 20, // 網格間距
length: 3, // 網格線長度
colour: '#ccc', // 網格顏色
snap: true // 是否自動對齊網格
}
});您可以配置工作區的縮放功能，包括是否顯示縮放控制按鈕、是否啟用滾輪縮放、縮放範圍等：
const workspace = Blockly.inject('blocklyDiv', {
toolbox: toolbox,
zoom: {
controls: true, // 是否顯示縮放控制按鈕
wheel: true, // 是否啟用滾輪縮放
startScale: 1.0, // 初始縮放比例
maxScale: 3, // 最大縮放比例
minScale: 0.3, // 最小縮放比例
scaleSpeed: 1.2 // 縮放速度
}
});Blockly 還提供了許多其他配置選項，如：
trashcan：是否顯示垃圾桶圖標。
scrollbars：是否顯示滾動條。
sounds：是否啟用音效。
readOnly：是否為只讀模式（不允許編輯）。
const workspace = Blockly.inject('blocklyDiv', {
toolbox: toolbox,
trashcan: true, // 顯示垃圾桶
scrollbars: true, // 顯示滾動條
sounds: true, // 啟用音效
readOnly: false // 非只讀模式
});Blockly 允許您自定義工作區的視覺外觀，包括積木顏色、字體、間距等。
Blockly 提供了一些內建的主題，如默認主題、高對比度主題等：
// 使用高對比度主題
const workspace = Blockly.inject('blocklyDiv', {
toolbox: toolbox,
theme: Blockly.Themes.HighContrast
});您也可以創建自己的主題，自定義各種視覺元素：
// 定義自定義主題
const customTheme = Blockly.Theme.defineTheme('customTheme', {
'base': Blockly.Themes.Classic,
'componentStyles': {
'workspaceBackgroundColour': '#1e1e1e',
'toolboxBackgroundColour': '#333',
'toolboxForegroundColour': '#fff',
'flyoutBackgroundColour': '#252526',
'flyoutForegroundColour': '#ccc',
'flyoutOpacity': 1,
'scrollbarColour': '#797979',
'insertionMarkerColour': '#fff',
'insertionMarkerOpacity': 0.3,
'scrollbarOpacity': 0.4,
'cursorColour': '#d0d0d0',
},
'blockStyles': {
'logic_blocks': {
'colourPrimary': '#5b80a5',
'colourSecondary': '#496684',
'colourTertiary': '#374e64',
},
'loop_blocks': {
'colourPrimary': '#5ba55b',
'colourSecondary': '#468446',
'colourTertiary': '#346334',
},
'math_blocks': {
'colourPrimary': '#5b67a5',
'colourSecondary': '#465a84',
'colourTertiary': '#344564',
},
'text_blocks': {
'colourPrimary': '#5ba58c',
'colourSecondary': '#46846e',
'colourTertiary': '#346353',
},
'variable_blocks': {
'colourPrimary': '#a55b5b',
'colourSecondary': '#844646',
'colourTertiary': '#633434',
},
'procedure_blocks': {
'colourPrimary': '#995ba5',
'colourSecondary': '#774684',
'colourTertiary': '#573464',
},
},
'categoryStyles': {
'logic_category': {
'colour': '#5b80a5',
},
'loops_category': {
'colour': '#5ba55b',
},
'math_category': {
'colour': '#5b67a5',
},
'text_category': {
'colour': '#5ba58c',
},
'variables_category': {
'colour': '#a55b5b',
},
'procedures_category': {
'colour': '#995ba5',
},
},
});
// 使用自定義主題
const workspace = Blockly.inject('blocklyDiv', {
toolbox: toolbox,
theme: customTheme
});您可以在運行時動態切換工作區的主題：
// 獲取工作區
const workspace = Blockly.getMainWorkspace();
// 切換到高對比度主題
workspace.setTheme(Blockly.Themes.HighContrast);
// 切換到自定義主題
workspace.setTheme(customTheme);在本章中，我們探討了 Blockly 的基本使用方法，包括工作區介面、積木類型、工具箱配置、工作區配置以及主題設定等方面。掌握這些基本知識後，您就可以開始使用 Blockly 創建自己的視覺化程式設計環境了。
在下一章中，我們將學習如何創建自定義積木，以擴展 Blockly 的功能，滿足特定的應用需求。