Pour créer un moteur de rendu personnalisé, vous devez créer une sous-classe de la classe Renderer. Pour en savoir plus sur ce qu'est un moteur de rendu et ce qu'il fait, consultez la documentation sur le concept de moteur de rendu.
class CustomRenderer extends Blockly.blockRendering.Renderer {
constructor() {
super();
}
}
Sans aucune personnalisation, le moteur de rendu par défaut se présente comme suit:
Vous pouvez également sous-classer l'un des autres moteurs de rendu intégrés, puis remplacer certaines de ses parties.
class CustomRenderer extends Blockly.thrasos.Renderer {
constructor() {
super();
}
}
Sous-classer d'autres composants de rendu
La forme réelle du bloc est déterminée par les sous-composants du moteur de rendu.
Par défaut, la classe Renderer fournit des versions fonctionnelles de tous les composants du moteur de rendu. Vous pouvez ainsi modifier un seul composant, sans avoir à vous soucier des autres.
Par exemple, si vous souhaitez modifier les formes des connexions, vous pouvez remplacer les constantes sans avoir à toucher les autres composants.
Consultez la documentation sur le composant du moteur de rendu pour en savoir plus sur la fonction de chaque composant.
Remplacer les méthodes d'usine
Après avoir sous-classé les composants du moteur de rendu, vous devez remplacer les méthodes d'usine de Renderer pour les composants que vous avez sous-classés. Cela permet au moteur de rendu de connecter correctement les différents composants.
Il existe une méthode pour chaque type de composant:
makeConstants_makeRenderInfo_makePathObject(notez qu'il n'y a pas de trait de soulignement)makeDrawer_
Enregistrer le moteur de rendu
Enfin, une fois que vous avez terminé de créer votre moteur de rendu personnalisé, vous devez l'enregistrer. Cela associe le moteur de rendu à une chaîne afin que vous puissiez la transmettre à vos options de configuration.
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
const workspace = Blockly.inject(blocklyDiv, {
renderer: 'custom_renderer',
});