Renderer

Die Form eines Blocks wird von einem Renderer basierend auf der Definition des Blocks (d. h. seinen Feldern und Verbindungen) bestimmt.

Integrierte Renderer

Blockly bietet drei integrierte Renderer, die dem Programm jeweils ein etwas anderes Aussehen verleihen.

Renderer Beschreibung Bild
Thrasos Der empfohlene Renderer. Es ist eine modernere Version des Geras-Renderers mit gleichmäßigeren Abständen und durchgezogenen Rahmen. thrasos
Geras Der Standard-Renderer. Es ist der ursprüngliche Renderer, mit dem Blockly entwickelt wurde. geras
Zelos Ein Renderer, der auf dem Blockdesign von Scratch 3.0 basiert. zelos

Wenn Sie einen dieser Renderer verwenden möchten, übergeben Sie den Namen an die Konfigurationsoptionen:

Blockly.inject('blocklyDiv', {
  renderer: 'thrasos'
});

Benutzerdefinierte Renderer

Wenn Sie Ihrem Programm ein anderes Erscheinungsbild als die integrierten Renderer geben möchten, können Sie auch einen benutzerdefinierten Renderer erstellen. Das Blockly-Team empfiehlt Ihnen für den Einstieg Folgendes:

  1. Lesen Sie die Konzeptdokumentation zu Renderern, um zu erfahren, wie alle Komponenten eines Renderers zusammenarbeiten.
  2. Absolvieren Sie das Codelab für benutzerdefinierte Renderer, um praktische Erfahrungen mit dem benutzerdefinierten Rendering zu sammeln.
  3. Fügen Sie Ihrem Projekt den Debug-Renderer hinzu.
  4. Renderer anpassen