轉譯器

Blockly 中的轉譯器可控制區塊的形狀，包括高度、邊框間距、邊框粗細和連線形狀。

自訂轉譯器

如要自訂區塊形狀，您必須建立自訂轉譯器。如要進一步瞭解此程序，請完成程式碼研究室或閱讀參考說明文件。建議您讀取任何 Blockly 內建轉譯器的程式碼，瞭解其運作方式。

如要建立自訂轉譯器，您必須：

1. 定義新的轉譯器。您可以根據您要從哪裡開始，將基本轉譯器類別或任何現有的轉譯器設為子類別。
2. 覆寫您要變更的部分。
   1. 舉例來說，如要為區塊加入更多邊框間距，您可以將 ConstantProvider (再次是基礎或任何現有的轉譯器) 設為子類別，並覆寫相關的常數。所有其他值都會與您選定的基礎類別相同。
   2. 在自訂 Renderer 子類別中，您必須連結新的 ConstantProvider 類別。覆寫 makeConstants_ 函式，以傳回自訂 ConstantProvider 的新執行個體，而非基礎類別。
   3. 覆寫其他類別 (例如 PathObject 或 Drawer) 時，請按照相同的程序操作。

3. 註冊轉譯器：

   Blockly.blockRendering.register('custom_renderer', CustomRenderer);
   

4. 在應用程式中使用轉譯器：

   Blockly.inject('blocklyDiv', {
     renderer: 'custom_renderer'
   });
   

內建轉譯器

Blockly 提供多個預先建構的轉譯器。您可以原封不動地使用這些轉譯器，或將其用做自訂轉譯器的基礎。

• geras (預設)
• thrasos (更現代的格拉斯功能)
• zelos (類似刮痕)
• minimalist (基礎轉譯器類別)

如要使用其中一個轉譯器，請將名稱傳遞至插入選項：

Blockly.inject('blocklyDiv', {
  renderer: 'thrasos'
});

如要將這些子類別加入子類別，請擴充適當的類別：

class CustomRenderer extends Blockly.geras.Renderer {}
class CustomConstantProvider extends Blockly.geras.ConstantProvider {}