In flex, how do I set a bitmap grid as a background for canvas

Question

Hi!

I've got a canvas in my app which I want to be backgrounded with a grid. I suppose, I need to create a DisplayObject with a single grid cell drawn on it and set it as a repeated bitmap fill for the canvas, but I can't figure out how to do that.

I would really be glad to see code examples

Thanks

Answer 1

Try this blog: He has source available. Tiling background image

Answer 2

I just +1'ed CookieOfFourtune's answer above.

 
The link he provides has many examples of getting the background to repeat.

I went through a number of the techniques mentioned in the link Cookie pointed to. It took me a little time, but on looking at the various approaches - I found one that I think is the best (performance, code, etc...) For me, the best answer was the one from degrafa.org.

The key reason is because it uses straight CSS-goodness to get the job done and does not require additional code. There are solutions in the link that Cookie pointed to that actually do provide a tiny bit of code to get what you need. However, I thought Degrafa was the best in terms of using what flex provides.

This link should take you directly to the sample - just right click and 'view source'. To get an idea of the approach at a glance - here's a little inline source.

In your application - do this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    viewSourceURL="srcview/index.html">
    <mx:Style source="assets/style/style.css" />
    <mx:Panel title="Degrafa CSS Skinning!" left="20" 
      right="20" top="20" bottom="20" />
</mx:Application>

In your CSS - do this:

/* http://www.w3.org/TR/2005/WD-css3-background-20050216/ */
/* http://dbaron.org/css/css-vg/ */

/* Degrafa CSS Example */

Application {
    background-color:         "-45deg #330000 #550000 #330000";
    background-image:         Embed("assets/images/designer.png");
    background-repeat:         repeat;
    background-position:     center;
    background-blend:         multiply;
    borderSkin:             ClassReference("com.degrafa.skins.CSSSkin");
}

Panel {
    color:                         #FFFFFF;
    border-alpha:                 0.8;
    border-color:                 "#002255 #002255 #001144 #001144";
    border-width:                 "10px 30px 10px 10px";
    border-top-right-radius:     24px;
    border-bottom-left-radius:     24px;
    background-image:             RETRO, KITCHEN, "-90deg #666666 60px 
                                  #FFFFFF 90% #AAAAAA", GRUNGE;
    background-repeat:             repeat, repeat-y, stretch, stretch;
    background-position:         "top center", "top 85%", center, center;
    background-blend:             normal, normal, multiply, multiply;
    asset-class:                 ClassReference("assets.ExamplesAssets");
    borderSkin:                 ClassReference("com.degrafa.skins.CSSSkin");
}

And you'll need this little guy for assets:

package assets
{
    public class ExamplesAssets
    {

        [Embed("//assets/images/retro.gif")]
        public static const RETRO:Class;

        [Embed("//assets/images/kitchen.gif")]
        public static const KITCHEN:Class;

        [Embed("//assets/images/grunge.png",
        scaleGridTop="120", scaleGridBottom="140", 
        scaleGridLeft="257", scaleGridRight="267")]
        public static const GRUNGE:Class;

    }
}