Per creare un renderer personalizzato, devi creare una sottoclasse Renderer
. Per ulteriori informazioni, consulta la documentazione sui concetti di rendering
informazioni sul renderer e sulle sue funzioni.
class CustomRenderer extends Blockly.blockRendering.Renderer {
constructor() {
super();
}
}
Senza alcuna personalizzazione, il renderer predefinito avrà il seguente aspetto:
Puoi anche creare sottoclassi di uno degli altri renderer integrati per poi sostituirne parti.
class CustomRenderer extends Blockly.thrasos.Renderer {
constructor() {
super();
}
}
Creare sottoclassi di altri componenti del renderer
La forma effettiva del blocco è determinata dal subcomponents del renderer.
Per impostazione predefinita, il corso Renderer fornisce versioni funzionanti di
tutti i componenti del rendering. Questo consente di modificare
è un singolo componente, senza doversi preoccupare degli altri.
Ad esempio, se vuoi cambia le forme delle connessioni, puoi sostituire le costanti senza dover toccare gli altri componenti.
Consulta la documentazione sui componenti di rendering per ulteriori informazioni informazioni su ogni singolo componente.
Esegui l'override dei metodi di fabbrica
Dopo aver creato sottoclassi dei componenti del rendering, devi
eseguire l'override dei metodi di fabbrica di Renderer per i componenti
sottoclassi del modello. Ciò consente al renderer di collegare correttamente i diversi componenti
in sinergia.
Esiste un metodo per ogni tipo di componente:
makeConstants_makeRenderInfo_makePathObject(nota che non è presente un trattino basso)makeDrawer_
Registra il renderer
Infine, dopo aver completato la creazione del renderer personalizzato, devi registrarlo. Questa operazione associa il renderer a una stringa per consentirti di passarla alla tua configurazione di injection.
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
const workspace = Blockly.inject(blocklyDiv, {
renderer: 'custom_renderer',
});