建立新的轉譯器

注意： 如果您尚未閱讀轉譯器概念文件，請先閱讀 或完成自訂轉譯器程式碼研究室 建議優先完成這些步驟！

如要建立自訂轉譯器，您必須將 Renderer 設為子類別 類別詳情請參閱轉譯器概念文件 提供轉譯器定義內容及功能相關資訊。

class CustomRenderer extends Blockly.blockRendering.Renderer {
  constructor() {
    super();
  }
}

如未自訂，預設轉譯器會如下所示：

您也可以將其他內建轉譯器設為子類別 並覆寫其中的某些部分

class CustomRenderer extends Blockly.thrasos.Renderer {
  constructor() {
    super();
  }
}

將其他轉譯器元件設為子類別

區塊的實際形狀取決於 子元件。

根據預設，Renderer 類別會提供可運作的 所有轉譯器元件。這樣一來，您就可以修改 單一元件，而無須擔心其他元件。

舉例來說 變更連接形狀，您就能覆寫 常數，而不必觸碰其他元件。

詳情請參閱轉譯器元件說明文件 瞭解個別元件的功能

覆寫工廠方法

將轉譯器元件設為子類別後，您必須 覆寫您元件的 Renderer 工廠方法 子類別。這可讓轉譯器正確連接不同元件 。

每種元件都有方法：

• makeConstants_
• makeRenderInfo_
• makePathObject (注意：無底線)
• makeDrawer_

註冊轉譯器

自訂轉譯器建立完成後 註冊。這會將轉譯器與字串建立關聯，讓您可以傳遞該字串 插入設定。

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

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