Renderer
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Die Form eines Blocks wird von einem Renderer anhand der Definition des Blocks (d. h. seiner Felder und Verbindungen) bestimmt.
Integrierte Renderer
Blockly bietet drei integrierte Renderer, die dem Programm jeweils ein etwas anderes Erscheinungsbild verleihen.
| Renderer |
Beschreibung |
Bild |
| Thrasos
|
Der empfohlene Renderer. Es ist eine modernere Version des Geras-Renderers mit gleichmäßigerem Abstand und durchgezogenen Rändern. |
|
| Geras
|
Der Standard-Renderer. Es ist der ursprüngliche Renderer, mit dem Blockly erstellt wurde. |
|
| Zelos |
Ein Renderer, der auf dem Blockdesign von Scratch 3.0 basiert. |
 |
Wenn Sie einen dieser Renderer verwenden möchten, geben Sie den Namen in die Konfigurationsoptionen ein:
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
Benutzerdefinierte Renderer
Wenn Sie Ihrem Programm ein anderes Erscheinungsbild als die integrierten Renderer verleihen möchten, können Sie auch einen benutzerdefinierten Renderer erstellen. Das Blockly-Team empfiehlt Ihnen für den Einstieg Folgendes:
- In den Dokumenten zum Renderer-Konzept erfahren Sie, wie alle Komponenten eines Renderers zusammenpassen.
- Schließen Sie das Codelab zum benutzerdefinierten Renderer ab, um praktische Erfahrungen mit benutzerdefiniertem Rendering zu sammeln.
- Fügen Sie Ihrem Projekt den Debug-Renderer hinzu.
- Renderer anpassen
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-07-25 (UTC).
[null,null,["Zuletzt aktualisiert: 2025-07-25 (UTC)."],[[["\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."]]
