Renderer

Un renderer in Blockly controlla la forma di un blocco, inclusi altezza, spaziatura interna, spessore del bordo e forma della connessione.

Renderer personalizzati

Se vuoi personalizzare la forma dei blocchi, devi creare un renderingr personalizzato. Per saperne di più su questo processo, completa il codelab o leggi la documentazione di riferimento. Potrebbe essere utile leggere il codice per qualsiasi renderer integrato di Blockly per comprendere come funzionano.

Per creare un renderer personalizzato, devi:

  1. Definisci un nuovo renderer. Puoi sottoclasse la classe del renderer di base o qualsiasi renderer esistente a seconda di dove vuoi iniziare.
  2. Esegui l'override delle parti che vuoi modificare.
    1. Ad esempio, per aggiungere ulteriore spaziatura interna ai blocchi, puoi sottoclasse un ConstantProvider (di nuovo, quello di base o qualsiasi renderer esistente) e sostituire la costante pertinente. Tutti gli altri valori rimarranno gli stessi della classe base scelta.
    2. Nella tua sottoclasse Renderer personalizzata, devi collegare il nuovo corso ConstantProvider. Esegui l'override della funzione makeConstants_ per restituire una nuova istanza della classe ConstantProvider personalizzata anziché della classe base.
    3. Segui la stessa procedura quando esegui l'override di altre classi, come PathObject o Drawer.

  3. Registra il renderer:

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

  4. Utilizza il renderer nell'applicazione:

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

Renderer integrati

Blockly fornisce diversi renderer predefiniti. Puoi usarli così come sono o come base di un renderer personalizzato.

Per utilizzare uno di questi renderer, inserisci il nome nelle opzioni di inserimento:

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

Per sottoclasserli, estendi le classi appropriate:

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