Renderer

Ein Renderer in Blockly steuert die Form eines Blocks, einschließlich Höhe, Abstand, Rahmenstärke und Verbindungsform.

Benutzerdefinierte Renderer

Wenn Sie die Form von Blöcken anpassen möchten, müssen Sie einen benutzerdefinierten Renderer erstellen. Weitere Informationen zu diesem Vorgang finden Sie im Codelab oder in der Referenzdokumentation. Es kann hilfreich sein, den Code für einen der integrierten Renderer von Blockly zu lesen, um zu verstehen, wie sie funktionieren.

So erstellen Sie einen benutzerdefinierten Renderer:

  1. Definieren Sie einen neuen Renderer. Sie können entweder die Basis-Renderer-Klasse oder einen der vorhandenen Renderer ableiten, je nachdem, wo Sie beginnen möchten.
  2. Überschreiben Sie die Teile, die Sie ändern möchten.
    1. Wenn Sie beispielsweise mehr Abstand zu Blöcken hinzufügen möchten, können Sie von ConstantProvider abgeleitete Klassen erstellen (wieder entweder dem Basis-Renderer oder einem vorhandenen Renderer) und die relevante Konstante überschreiben. Alle anderen Werte bleiben unverändert wie die ausgewählte Basisklasse.
    2. In der benutzerdefinierten abgeleiteten Klasse Renderer müssen Sie die neue Klasse ConstantProvider verknüpfen. Überschreiben Sie die Funktion makeConstants_, um eine neue Instanz Ihrer benutzerdefinierten ConstantProvider anstelle der Basisklasse zurückzugeben.
    3. Gehen Sie genauso vor, wenn Sie andere Klassen wie PathObject oder Drawer überschreiben.

  3. Registrieren Sie den Renderer:

    Blockly.blockRendering.register('custom_renderer', CustomRenderer);

  4. Verwenden Sie den Renderer in Ihrer Anwendung:

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

Integrierte Renderer

Blockly bietet mehrere vorgefertigte Renderer. Sie können sie unverändert oder als Basis für einen benutzerdefinierten Renderer verwenden.

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

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

Um eine Unterklasse zu erstellen, erweitern Sie die entsprechenden Klassen:

class CustomRenderer extends Blockly.geras.Renderer {}
class CustomConstantProvider extends Blockly.geras.ConstantProvider {}