创建新的渲染程序

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

如需创建自定义渲染程序，您需要创建 Renderer 类的子类。如需详细了解渲染程序的定义及其用途，请参阅渲染程序概念文档。

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

如果不进行任何自定义，默认渲染程序如下所示：

您还可以创建其他某个内置渲染程序的子类，然后替换其部分。

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

创建其他渲染程序组件的子类

块的实际形状由渲染程序的子组件决定。

默认情况下，Renderer 类提供所有渲染程序组件的工作版本。这样，您就可以修改单个组件，而无需担心其他组件。

例如，如果要更改连接的形状，您可以替换constants，而不必触摸其他组件。

如需详细了解各个组件的用途，请参阅渲染程序组件文档。

替换工厂方法

为渲染程序组件创建子类后，您需要为创建子类的组件替换 Renderer 的工厂方法。这样，渲染程序就可以正确地连接不同的组件。

每种组件都有一个对应的方法：

• makeConstants_
• makeRenderInfo_
• makePathObject（注意没有下划线）
• makeDrawer_

注册渲染程序

最后，完成自定义渲染程序的创建后，您需要注册该渲染程序。这会将渲染程序与一个字符串相关联，以便您可以将其传递给注入配置。

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

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