Outils pour utilisateurs

Outils du site

Traductions de cette page?:

fr:hints_tips

Ceci est une ancienne révision du document !


A PCRE internal error occured. This might be caused by a faulty plugin

FIXME **Cette page n'est pas encore traduite entièrement. Merci de terminer la traduction**\\ //(supprimez ce paragraphe une fois la traduction terminée)// ====== Trucs & Astuces ====== 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 ! ===== A propos de la création du Canvas ===== Cette section a pour but de vous aider à concevoir l'image générée pour vos cartes. ==== Image de l'utilisateur dans un cadre non-rectangulaire ==== 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 ! {{:tips:skeleton.jpg?200|Une carte avec une zone image non-rectangulaire}} Pour définir l'image de fond, j'initialise la section ''canvasFields'' ainsi : <code javascript> "canvasFields": [ { "type": "image", "width": 880, "height":1201, "src": "data:image/png;base64,iVBORw0..." } ], </code> <WRAP center round info 60%> Notez que la DataUrl a été volontairement tronquée. </WRAP> 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é !

fr/hints_tips.1470904841.txt.gz · Dernière modification: 2016/08/11 10:40 par Nicolas Ronvel