Zum Erstellen eines benutzerdefinierten Renderers müssen Sie eine Unterklasse von Renderer erstellen.
. Weitere Informationen finden Sie in der Dokumentation zum Renderer-Konzept.
was ein Renderer ist und was er tut.
class CustomRenderer extends Blockly.blockRendering.Renderer {
constructor() {
super();
}
}
Ohne Anpassungen sieht der Standard-Renderer so aus:
Sie können auch Unterklassen für einen der anderen integrierten Renderer erstellen. und Teile davon überschreiben.
class CustomRenderer extends Blockly.thrasos.Renderer {
constructor() {
super();
}
}
Abgeleitete Klassen von anderen Renderer-Komponenten erstellen
Die tatsächliche Form des Blocks wird durch den Unterkomponenten des Renderers.
Standardmäßig stellt die Klasse Renderer Arbeitsversionen von
alle Renderer-Komponenten. So können Sie eine
ohne sich um die anderen kümmern zu müssen.
Wenn Sie zum Beispiel Formen von Verbindungen ändern, können Sie die Konstanten festlegen, ohne die anderen Komponenten berühren zu müssen.
Weitere Informationen finden Sie in der Dokumentation zur Renderer-Komponente. Informationen zur Funktion der einzelnen Komponenten.
Factory Methoden überschreiben
Nachdem Sie die Renderer-Komponenten abgeleitet haben, müssen Sie
die Factory-Methoden von Renderer für die Komponenten überschreiben,
abgeleitete Klassen ableiten. So kann der Renderer die verschiedenen Komponenten
miteinander verbinden.
Für jeden Komponententyp gibt es eine Methode:
makeConstants_makeRenderInfo_makePathObject(Hinweis ohne Unterstrich)makeDrawer_
Renderer registrieren
Wenn Sie den benutzerdefinierten Renderer erstellt haben, und registrieren Sie es. Dadurch wird der Renderer mit einem String verknüpft, sodass Sie ihn übergeben können. in Ihre Injection-Konfiguration ein.
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
const workspace = Blockly.inject(blocklyDiv, {
renderer: 'custom_renderer',
});