块的形状由渲染器根据块的定义(即其字段和连接)来确定。
内置渲染器
Blockly 提供了三种内置渲染器,每种渲染器都会让程序呈现出略有不同的风格。
渲染程序 | 说明 | 图片 |
---|---|---|
Thrasos | 推荐的渲染器。这是对 Geras 渲染器的更现代的诠释,具有更均匀的间距和实心边框。 | ![]() |
Geras | 默认渲染器。它是 Blockly 最初使用的渲染器。 | ![]() |
Zelos | 基于 Scratch 3.0 块设计的渲染器。 | ![]() |
如需使用其中一种渲染器,请将名称传递到配置选项中:
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
自定义渲染器
如果您希望自己的程序呈现出与任何内置渲染器不同的外观和风格,还可以创建自定义渲染器。为了帮助您入门,Blockly 团队建议您:
- 请仔细阅读渲染器概念文档,了解渲染器的所有组件如何协同工作。
- 完成自定义渲染器 Codelab,以便通过实践操作来熟悉自定义渲染。
- 将调试渲染器添加到您的项目中。
- 自定义渲染器。