Pour créer un moteur de rendu personnalisé, vous devez sous-classer la classe Renderer. Consultez la documentation sur les concepts de moteur de rendu pour en savoir plus sur ce qu'est un moteur de rendu et sur sa fonction.
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 en remplacer certaines parties.
class CustomRenderer extends Blockly.thrasos.Renderer {
constructor() {
super();
}
}
Sous-classe d'autres composants du moteur 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. Cela vous permet de modifier un seul composant, sans avoir à vous soucier des autres.
Par exemple, si vous souhaitez modifier les formes des connexions, vous pouvez remplacer les constants sans avoir à toucher les autres composants.
Consultez la documentation des composants de moteur de rendu pour en savoir plus sur la fonction de chaque composant.
Remplacer les méthodes de fabrique
Après avoir sous-classé les composants du moteur de rendu, vous devez remplacer les méthodes de fabrique de Renderer pour les composants que vous avez sous-classés. Cela permet au moteur de rendu de connecter correctement les différents composants entre eux.
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 la création de votre moteur de rendu personnalisé terminée, vous devez l'enregistrer. Cette opération associe le moteur de rendu à une chaîne afin que vous puissiez le transmettre à votre configuration d'injection.
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
const workspace = Blockly.inject(blocklyDiv, {
renderer: 'custom_renderer',
});