Cette page liste des trucs, des astuces et des bouts de code concernant des choses courantes, fréquentes et/ou difficiles à obtenir via Geckos. Considérez cette page comme une boîte à outils !

Cette section a pour but de vous aider à concevoir l'image générée pour vos cartes.

Parfois, une image chargée pour illustrée une carte se doit d'apparaître dans un cadre non-rectangulaire. Il est possible de créer un objet de type shape (forme) pour l'y inclure et ainsi délimiter sa forme, mais c'est assez fastidieux. Si une image de fond générique est utilisée pour décorer la carte, il existe une méthode bien plus simple !

Pour définir l'image de fond, j'initialise la section canvasFields ainsi :

"canvasFields": [
  { "type": "image", "width": 880, "height":1201, "src": "data:image/png;base64,iVBORw0..." }
],

Disons que j'ajoute un champ permettant à l'utilisateur de charger une image, le nom de ce champ étant picture. Je peux ajouter l'image au canvas à la suite de mon image de fond, mais elle apparaîtra dans un rectangle.

Comment corriger cela ? Et bien, commençons par éditer notre image de fond. On l'enregistre au format PNG, puis on remplit la zone devant accueillir l'illustration avec une couleur transparente. On sauve l'image, on récupère sa DataUrl (ou une url statique), puis on copie cette valeur dans le template. Si on charge une nouvelle carte sans y ajouter d'illustration, on devrait voir apparaître la couleur de fond du template dans la zone.

Bien, maintenant, ajoutons dans la section canvasField notre image d'illustration liée au champ picture, en la plaçant avant notre image de fond. Ainsi, on superposera l'image de fond par-dessus l'illustration, pour obtenir l'effet souhaité !