Differences

This shows you the differences between two versions of the page.

@@ Line 1: / Line 1: @@
+====== Hints & Tips ======
+This page will list many hints, tips & snippets about ways to get current, frequent, or difficult things in the **Geckos** engine.
+===== About the card canvas creation =====
+Those hints will help you design your card.
+==== Image from the user in a non-rectangular frame ====
+Sometimes, an image loaded in a card needs to appear in a frame that is not-rectangular. We could create a shape to clip it, but that will be tedious. If a generic image background is used to decorate the card, there's an easier method.
+{{:tips:skeleton.jpg?200|A card with a non-rectangular frame}}
+If I have an Image background, I set the ''canvasFields'' section like this :
+<code javascript>
+"canvasFields": [
+  { "type": "image", "width": 880, "height":1201, "src": "data:image/png;base64,iVBORw0..." }
+],
+</code>
+<WRAP center round info 60%>
+Note that the DataUrl has been voluntarily truncated.
+</WRAP>
+Let's say I've added a field allowing the user to load an image, with the field's name being ''picture''. I can add the picture to the canvas, but it will appear in a rectangle, and be over my top left area.
+How to correct that ? Well, first, edit your image. Get it in PNG format, and set the area where the image should appear to a transparent color. Save your image, translate it to DataUrl (or static url), and copy it to your template. If you test your template without loading any image, you should see your background color.
+Good, now, edit your ''canvasField'' section by putting your image linked to ''picture'' before your background image. By getting your custom image underneath, the background image will not be written over !

Geckos Documentation

User Tools

Site Tools

Differences

Page Tools