创建新的渲染程序

如需创建自定义渲染程序,您需要创建 Renderer 的子类 类。如需了解详情,请参阅渲染器概念文档 呈现程序的定义及其用途的相关信息

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

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

基础渲染程序

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

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

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

砌块的实际形状由 子组件

默认情况下,Renderer 类提供 所有渲染程序组件。这样,您就可以修改 而无需考虑其他组件

例如,如果您希望 更改连接的形状,则可以覆盖 常量,而无需联系其他组件。

如需了解详情,请参阅渲染程序组件文档 了解各个组件的功能。

替换工厂方法

在为渲染程序组件创建子类后,您需要 替换 Renderer 的工厂方法 已子类化。这样,渲染程序就能正确连接不同的组件 。

每种组件都有相应的方法:

注册渲染程序

最后,在创建了自定义渲染程序后,您需要 进行注册。这会将渲染程序与字符串相关联,以便您可以传递 注入配置

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

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