Blockly 中文文档

# 创建自定义渲染器

提示

如果你还没读过渲染器概念文档，或还没做过官方 codelab（custom renderer codelab (opens new window)），建议先完成。

要创建自定义渲染器，需要继承 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',
});

配置项结构见创建工作区。

← 连接形状 →