创建新的渲染程序

注意 ：如果您尚未仔细阅读渲染器概念文档 或已完成自定义渲染程序 Codelab 建议先完成这些任务！

如需创建自定义渲染程序，您需要创建 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',
});