Pour créer un moteur de rendu personnalisé, vous devez sous-classer Renderer
. Pour en savoir plus, consultez la documentation sur les concepts liés au moteur de rendu.
des informations sur ce qu'est un moteur de rendu et ce qu'il fait.
class CustomRenderer extends Blockly.blockRendering.Renderer {
constructor() {
super();
}
}
Sans 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 des autres composants du moteur de rendu
La forme réelle du volume est déterminée par le 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
composant unique, sans avoir à
se soucier des autres.
Par exemple, si vous souhaitez modifier la forme des connexions, vous pouvez ignorer constantes sans avoir à toucher les autres composants.
Pour en savoir plus, consultez la documentation sur les composants du moteur de rendu. des informations sur ce que fait chaque composant individuel.
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
sous-classés. Cela permet au moteur de rendu de connecter correctement les différents composants
ensemble.
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 votre moteur de rendu personnalisé créé, vous devez l'enregistrer. Le moteur de rendu est alors associé à une chaîne afin que vous puissiez la transmettre à votre configuration d'injection.
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
const workspace = Blockly.inject(blocklyDiv, {
renderer: 'custom_renderer',
});