Benutzerdefinierte Renderer erstellen

Wenn Sie einen benutzerdefinierten Renderer erstellen möchten, müssen Sie eine untergeordnete Klasse der Klasse Renderer erstellen. Weitere Informationen zu Renderern und ihrer Funktion finden Sie in den Dokumenten zum Rendererkonzept.

class CustomRenderer extends Blockly.blockRendering.Renderer {
  constructor() {
    super();
  }
}

Ohne Anpassung sieht der Standard-Renderer so aus:

Basis-Renderer

Sie können auch einen der anderen vordefinierten Renderer als Unterklasse definieren und dann Teile davon überschreiben.

class CustomRenderer extends Blockly.thrasos.Renderer {
  constructor() {
    super();
  }
}

Unterklasse anderer Renderer-Komponenten

Die tatsächliche Form des Blocks wird durch die Unterkomponenten des Renderers bestimmt.

Standardmäßig bietet die Klasse Renderer funktionierende Versionen aller Renderer-Komponenten. So können Sie eine einzelne Komponente ändern, ohne sich um die anderen kümmern zu müssen.

Wenn Sie beispielsweise die Formen von Verbindungen ändern möchten, können Sie die Konstanten überschreiben, ohne die anderen Komponenten zu ändern.

Weitere Informationen zu den einzelnen Komponenten findest du in der Dokumentation zu Renderer-Komponenten.

Factory-Methoden überschreiben

Nachdem Sie die Renderer-Komponenten als Unterklasse definiert haben, müssen Sie die Fabrikmethoden von Renderer für die Komponenten überschreiben, die Sie als Unterklasse definiert haben. So kann der Renderer die verschiedenen Komponenten richtig miteinander verbinden.

Für jede Art von Komponente gibt es eine Methode:

Renderer registrieren

Nachdem Sie den benutzerdefinierten Renderer erstellt haben, müssen Sie ihn registrieren. Dadurch wird der Renderer mit einem String verknüpft, den du an deine Konfigurationsoptionen übergeben kannst.

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

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