研究调查问卷:请告诉我们您使用 Blockly 的体验
开始调查问卷
渲染程序
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
块的形状由渲染程序根据块的定义(即其字段和连接)确定。
内置渲染程序
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-07-25。
[null,null,["最后更新时间 (UTC):2025-07-25。"],[[["\u003cp\u003eBlock shape is determined by a renderer based on the block's definition, including fields and connections.\u003c/p\u003e\n"],["\u003cp\u003eBlockly offers three built-in renderers: Thrasos (recommended), Geras (default), and Zelos (Scratch-3.0 based).\u003c/p\u003e\n"],["\u003cp\u003eCustom renderers can be created for unique program aesthetics by following documentation and tutorials.\u003c/p\u003e\n"]]],[],null,["# Renderers\n\nThe shape of a block is determined by a renderer, based on the\n[block's definition](/blockly/guides/create-custom-blocks/define/block-definitions) (that is, its fields and connections).\n\nBuilt-in renderers\n------------------\n\nBlockly provides three built-in renderers, each of which give a slightly\ndifferent feel to the program.\n\n| Renderer | Description | Image |\n|----------|---------------------------------------------------------------------------------------------------------------------|-------|\n| Thrasos | The recommended renderer. It is a more modern take on the geras renderer, with more even spacing and solid borders. | |\n| Geras | The default renderer. It is the original renderer that Blockly was built with. | |\n| Zelos | A renderer based on Scratch-3.0 block design. | |\n\nTo use one of these renderers, pass the name into the configuration options: \n\n Blockly.inject('blocklyDiv', {\n renderer: 'thrasos'\n });\n\nCustom renderers\n----------------\n\nIf you want to give your program a different look and feel than any of the\nbuilt-in renderers, you can also create a custom renderer. To get started the\nBlockly team recommends you:\n\n1. Read through the [renderer concept docs](/blockly/guides/create-custom-blocks/renderers/concepts/overview) to learn how all of the components of a renderer fit together.\n2. Complete the [custom renderer codelab](https://blocklycodelabs.dev/codelabs/custom-renderer/index.html) to get hands-on practice with custom rendering.\n3. Add the [debug renderer](https://www.npmjs.com/package/@blockly/dev-tools#debug-renderer) to your project.\n4. Customize your renderer."]]