渲染程序
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
块的形状由渲染器根据块的定义(即其字段和连接)来确定。
内置渲染器
Blockly 提供了三种内置渲染器,每种渲染器都会让程序呈现出略有不同的风格。
渲染程序 |
说明 |
图片 |
Thrasos |
推荐的渲染器。这是对 Geras 渲染器的更现代的诠释,具有更均匀的间距和实心边框。 |
 |
Geras |
默认渲染器。它是 Blockly 最初使用的渲染器。 |
 |
Zelos |
基于 Scratch 3.0 块设计的渲染器。 |
 |
如需使用其中一种渲染器,请将名称传递到配置选项中:
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
自定义渲染器
如果您希望自己的程序呈现出与任何内置渲染器不同的外观和风格,还可以创建自定义渲染器。为了帮助您入门,Blockly 团队建议您:
- 请仔细阅读渲染器概念文档,了解渲染器的所有组件如何协同工作。
- 完成自定义渲染器 Codelab,以便通过实践操作来熟悉自定义渲染。
- 将调试渲染器添加到您的项目中。
- 自定义渲染器。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-09-29。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2025-09-29。"],[],[]]