Moteurs de rendu

Un moteur de rendu dans Blockly contrôle la forme d'un bloc, y compris sa hauteur, sa marge intérieure, son épaisseur de bordure et la forme de connexion.

Moteurs de rendu personnalisés

Si vous souhaitez personnaliser la forme des blocs, vous devez créer un moteur de rendu personnalisé. Pour en savoir plus sur ce processus, suivez l'atelier de programmation ou lisez la documentation de référence. Il peut être utile de lire le code de l'un des moteurs de rendu intégrés de Blockly pour comprendre leur fonctionnement.

Pour créer un moteur de rendu personnalisé, procédez comme suit:

  1. Définissez un nouveau moteur de rendu. Vous pouvez sous-classer la classe de moteur de rendu de base ou l'un des moteurs de rendu existants en fonction de votre point de départ.
  2. Remplacez les parties à modifier.
    1. Par exemple, pour ajouter une marge intérieure aux blocs, vous pouvez sous-classer un ConstantProvider (de nouveau, le moteur de rendu de base ou tout moteur de rendu existant) et remplacer la constante pertinente. Toutes les autres valeurs restent identiques à celles de la classe de base que vous avez choisie.
    2. Dans votre sous-classe Renderer personnalisée, vous devez connecter la nouvelle classe ConstantProvider. Ignorez la fonction makeConstants_ pour renvoyer une nouvelle instance de votre ConstantProvider personnalisé au lieu de la classe de base.
    3. Suivez le même processus pour remplacer d'autres classes telles que PathObject ou Drawer.

  3. Enregistrez votre moteur de rendu:

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

  4. Utilisez votre moteur de rendu dans votre application:

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

Moteurs de rendu intégrés

Blockly fournit plusieurs moteurs de rendu prédéfinis. Vous pouvez les utiliser tels quels ou les utiliser comme base d'un moteur de rendu personnalisé.

Pour utiliser l'un de ces moteurs de rendu, transmettez son nom aux options d'injection:

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

Pour les sous-classer, étendez la ou les classes appropriées :

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