创建自定义渲染程序

注意 ：如果您尚未通读“渲染程序概念”文档或未完成“自定义渲染程序”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',
});