CODEWITHSUNDEEP
actionscript-3apache-flexbitmapflex3
Eric
Eric

Reputation: 11662

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

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:

??

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.

Upvotes: 3

Views: 4905

Answers (2)

Eric
Eric

Reputation: 11662

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);    
}

Upvotes: 2

Joel Hooks
Joel Hooks

Reputation: 6565

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.

Upvotes: 3

Related Questions