In Flex, how do I create, populate, and display a bitmap?

Question

Starting from a totally empty MXML application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" >

</mx:Application>

What is the script that will:

• create a bitmap (should this be a BitmapData object?)
• programatically populate it with data (e.g. draw a circle) (is there any more efficient way to do this than repeatedly calling BitmapData.SetPixel?)
• render it within the application (e.g. centered in the middle) (how DO I get a bitmap onto the screen? Online Flash samples show calling myBitmap=new Bitmap(myBitmapData) and then myBitmap.AddChild, but this throws an error in Flex).

??

NOTE: The goal is not just to get a circle on the screen, it's to populate a Bitmap (or BitmapData? Or ???) object using SetPixel (or ???) and then get its contents onto the screen, as one would need to do in an image processing or visual effects application.

Answer 1

You have a couple of options. The first is to examine the Degrafa framework which has some really incredible drawing tools, otherwise you need to add a script block and use the AS3 drawing api in a function (in this case probably called on creationComplete:

private function handleCreationComplete():void
{
    var component:UIComponent = new UIComponent(); //needed to add to the flex display list
    var myCircle:Sprite = new Sprite();
    myCircle.graphics.beginFill(0xFFFFFF,1)
    myCircle.graphics.drawCircle(100,100,50);
    component.addChild(myCircle);
    this.addChild(component);
}

This won't center the circle, but you can figure that bit out.

you can use this function to actually get the bitmap out of the above UIComponent:

private function getBitmapData( target : UIComponent ) : BitmapData
   {
    var bd : BitmapData = new BitmapData( target.width, target.height );
    var m : Matrix = new Matrix();
    bd.draw( target, m );
    return bd;
   }

from here.

Answer 2

Here's a complete, working example I was able to create based on Joel Hooks' suggestions:

MXML FILE (ards.mxml):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
       creationComplete="onCreationComplete()">

<mx:Script source="ards_script.as" />

</mx:Application>

SCRIPT FILE (ards_script.as):

import mx.core.UIComponent;

private function onCreationComplete():void
{
    // create a UIComponent and add it to the Flex display list
    var component:UIComponent = new UIComponent();
    component.width = this.width;
    component.height = this.height;
    component.x = 0;
    component.y = 0;
    this.addChild(component);

    // create a BitmapData object (basically an array of pixels) the same size as the screen    
    var bd : BitmapData = new BitmapData( component.width, component.height );

    // draw a green circle in the bitmap data
    var xCenter:int = component.width/2;
    var yCenter:int = component.height/2;
    var r:int = Math.min(xCenter,yCenter);
    var rSquare:int = r*r;
    var color:Number = 0x00ff00;
    for( var i:int=0; i<component.width; i++ )
    {
        for( var j:int=0; j<component.width; j++ )
        {
            var dX:int = i - xCenter;
            var dY:int = j - yCenter;
            var q:int = dX*dX + dY*dY;
            if( q < rSquare )
            {
                    bd.setPixel( i, j, color );
            }    
        }
    }

    // create a bitmap based on the data, and add it as a child to the UIComponent to be displayed
    // (if you try to add it directly to the Application, you get a runtime error)
    var bt:Bitmap = new Bitmap(bd);
    component.addChild(bt);    
}