渲染程序

Blockly 中的渲染程序可以控制块的形状，包括高度、内边距、边框厚度和连接形状。

自定义渲染程序

如果您想自定义块的形状，则需要创建自定义渲染程序。如需详细了解此过程，您可以完成 Codelab 或阅读参考文档。阅读 Blockly 任何内置渲染程序的代码以了解其工作原理可能会很有帮助。

如需创建自定义渲染程序，您需要：

  1. 定义一个新的渲染程序。您可以根据所需的起始位置，将基本渲染程序类或任何现有渲染程序子类化。
  2. 替换您想要更改的部分。
    1. 例如，如需向块添加更多内边距，您可以子类化 ConstantProvider（同样，基类渲染程序或任何现有渲染程序），并替换相关常量。所有其他值都将与您选择的基类相同。
    2. 在自定义 Renderer 子类中，您需要连接新的 ConstantProvider 类。替换 makeConstants_ 函数以返回自定义 ConstantProvider 的新实例，而不是基类。
    3. 替换其他类（例如 PathObject 或 Drawer）时，请遵循相同的流程。

  3. 注册渲染程序：

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

  4. 在您的应用中使用渲染程序：

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

内置渲染器

Blockly 提供了一些预构建的渲染程序。您可以按原样使用这些渲染程序，也可以将其用作自定义渲染程序的基础。

如需使用下列某个渲染程序，请将名称传递到注入选项：

Blockly.inject('blocklyDiv', {
  renderer: 'thrasos'
});

如需子类化该类，请扩展相应的类：

class CustomRenderer extends Blockly.geras.Renderer {}
class CustomConstantProvider extends Blockly.geras.ConstantProvider {}