Zum Erstellen eines benutzerdefinierten Renderers müssen Sie eine abgeleitete Klasse der Renderer-Klasse erstellen. Weitere Informationen dazu, was ein Renderer ist und was er tut, finden Sie in der Dokumentation zum Rendererkonzept.
class CustomRenderer extends Blockly.blockRendering.Renderer {
constructor() {
super();
}
}
Ohne Anpassung sieht der Standard-Renderer so aus:
Sie können auch von einem der anderen integrierten Renderer abgeleitete Klassen erstellen und dann Teile davon überschreiben.
class CustomRenderer extends Blockly.thrasos.Renderer {
constructor() {
super();
}
}
Unterklassen für andere Renderer-Komponenten erstellen
Die tatsächliche Form des Blocks wird durch die Unterkomponenten des Renderers bestimmt.
Standardmäßig stellt die Klasse Renderer funktionierende Versionen aller Renderer-Komponenten bereit. So können Sie eine einzelne Komponente ändern, ohne sich um die anderen kümmern zu müssen.
Wenn Sie beispielsweise die Verbindungsformen ändern möchten, können Sie die constants überschreiben, ohne die anderen Komponenten bearbeiten zu müssen.
Weitere Informationen zur Funktionsweise der einzelnen Komponenten finden Sie in der Dokumentation zur Renderer-Komponente.
Werksmethoden überschreiben
Nachdem Sie die Renderer-Komponenten abgeleitet haben, müssen Sie die Factory-Methoden von Renderer für die abgeleiteten Komponenten überschreiben. So kann der Renderer die verschiedenen Komponenten richtig miteinander verbinden.
Für jede Art von Komponente gibt es eine Methode:
makeConstants_makeRenderInfo_makePathObject(ohne Unterstrich)makeDrawer_
Renderer registrieren
Nachdem Sie den benutzerdefinierten Renderer erstellt haben, müssen Sie ihn registrieren. Dadurch wird der Renderer mit einem String verknüpft, sodass Sie ihn an Ihre Injection-Konfiguration übergeben können.
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
const workspace = Blockly.inject(blocklyDiv, {
renderer: 'custom_renderer',
});