Reading bitmap pixels information

[iquaani]

Hi everyone !

I would like to read all the pixels from the first image that has certain color and mark those pixels to another picture as for example red. Both of the images are same size and the first image is king of mask image that is manipulated to have just few different colors in it.

Should i use

Code:

BitmapData.getPixels();  

to read pixel information from "first" image? or is there any convenient way to do that ?

After reading all needed pixels, what is the best way to mark or "paint" those selected pixels to second picture. would i loop the whole picture with the bytearray i got from the

Code:

BitmapData.getPixels();  

and mark the pixels for example like one at each time in a loop ?

i appreciate any examples, i just a noob with image manipulation and drawing api..

Code:

var g:Graphics = surface.graphics;
                        g.clear();
                        
                        g.beginFill(0x00FF00,1);
                        
                        g.drawRect( 0, 0, 1, 1 );
                        g.endFill();

[flexy]

There's a good source example at the bottom of this page to get you going.

There's also a good example + source here.

 

[iquaani]

Thanks  8-)

[iquaani]

There's a good source example at the bottom of this page to get you going.

There's also a good example + source here.

 

I just tried that first link example, How do i wrap it to existing project, for example in button

Code:

<mx:Button x="402" y="10" label="picture" click="BitmapDataExample();"/>

??

i'm just beginner with ac.  

[flexy]

Code:

<mx:Button x="402" y="10" label="picture" click="BitmapDataExample();"/>

??

I'm not sure what you mean by wrapping it into a project.

Also, don't use a semi-colon when calling a function from an MXML tag, and functions should probably start with a lowercase letter, so as not to confuse them with classes.

Code:

<mx:Button x="402" y="10" label="picture" click="BitmapDataExample()"/>

[iquaani]

I'm not sure what you mean by wrapping it into a project.

thanks, i got it this far.

I was just wondering that when i'm calling the function

Code:

<mx:Button x="402" y="10" label="Draw" click="BitmapDataExample();"/>

the picture doesn't come visible. How do i show the modified image in a fro example in canvas ?

[iquaani]

i'm generating Bitmap and i want to show it on UI. How do i do it ? do i have to use UIComponent, box, canvas or something where i can put my generated bitmap.

For Example i assume that i have :

Code:

<mx:Canvas x="10" y="10" width="327" height="273" id="surface" creationComplete="DrawBitmap()">

private function DrawBitmap() : void
{
var bitmap:BitmapData = new BitmapData(100,100,true,0x00FFFFFF);
var image:Bitmap = new Bitmap(bitmap);
surface.addChild(image);
}

This gives me an error

Type Coercion failed: cannot convert flash.display::Bitmap@7023241 to mx.core.IUIComponent.

Do i have to make UIComponent somehow ?

I would appreciate a little example code very much, i'm just a beginner with flex and AC

Thanks

[flexy]

OK, you're right to try and add your 'drawing data' to a UIComponent for display, but you can't draw DIRECTLY onto a UIComponent. Create a Shape or Sprite object within the UIComponent, and add your Bitmap as a child of this, then add your Shape/Sprite as a child of the UIComponent.

Code:

// very roughly:
ShapeObject.addChild(bitmap);
UIComponent.addChild(ShapeObject);

[iquaani]

OK, you're right to try and add your 'drawing data' to a UIComponent for display, but you can't draw DIRECTLY onto a UIComponent. Create a Shape or Sprite object within the UIComponent, and add your Bitmap as a child of this, then add your Shape/Sprite as a child of the UIComponent.

Code:

// very roughly:
ShapeObject.addChild(bitmap);
UIComponent.addChild(ShapeObject);

Sorry i didn't fully understand  :-?

Did you mean that i have to do it someway like this

Code:

private function DrawBitmap() : void
                        {
                              import flash.display.BitmapData;
                              import mx.core.UIComponent;
                              var bitmap:BitmapData = new BitmapData(100,100,true,0x00FFFFFF);
                              var image:Bitmap = new Bitmap(bitmap);
                              
                              var bitmapHolder:UIComponent = new UIComponent();
                              bitmapHolder.addChild(image);
                  
                                        // Code to add this to canvas id =surface ??
                        }

Could you please clarify it little bit more, it seems like this is the hardest thing with Bitmaps.. I appreciate your help

[flexy]

I think you're almost there.

Code:

private function DrawBitmap() : void
                        {
                              import flash.display.BitmapData;
                              import mx.core.UIComponent;
                                        import flash.display.Sprite;

                              var bitmap:BitmapData = new BitmapData(100,100,true,0x00FFFFFF);
                              var image:Bitmap = new Bitmap(bitmap);
                              
                              var bitmapHolder:UIComponent = new UIComponent();
                                      
                                        var mySprite:Sprite =  new Sprite();
                                        mySprite.addChild(image);

                              bitmapHolder.addChild(mySprite);
                  
                        }

Let me know how it goes.

[iquaani]

I Really appreciate your help, thanks for it  


I Still have this problem of getting this generated bitmap visible in User interface. How do i draw this bitmap to UI ? Do i have to add/show this bitmap to canvas or some other component ?
Here is simplified version:

Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Panel width="367" height="343" layout="absolute" x="27" y="10">
            <mx:Canvas x="10" y="10" width="327" height="273" id="surface">
            </mx:Canvas>
            
      </mx:Panel>
      <mx:Script>
            <![CDATA[
                  private function DrawBitmap() : void
                        {
                              import flash.display.Graphics;
                              import flash.display.BitmapData;
                              import mx.core.UIComponent;
                              var bitmap:BitmapData = new BitmapData(100,100,true,0xFF007090);
                              var image:Bitmap = new Bitmap(bitmap);
                              
                              var bitmapHolder:UIComponent = new UIComponent();
                              var mySprite:Sprite =  new Sprite();
                                    mySprite.addChild(image);
                                          
                              bitmapHolder.addChild(mySprite);
                              // Add bitmapholder to canvas ?
                        }
            ]]>
      </mx:Script>
      <mx:Button x="402" y="10" label="Draw" click="DrawBitmap();"/>
</mx:Application>

I Just bought AC 3 CookBook, seems like i have to start reading it  

[iquaani]

I Just found a solution   I don't know that is this the right way ??

 but i just added

Code:

surface.addChild(bitmapHolder);

to my DrawBitmap function

Afterall it was littlebit confusing with all different objects..I just got to start reading all Bitmap APi documentations
Cos i think that there is much smarter ways to do this. Maybe i just somehow create a class that extends Sprite as there was in adobe documentation..

[flexy]

Code:

import flash.display.Bitmap;
import flash.display.BitmapData;

var myBitmapData:BitmapData = new BitmapData(80, 20);
var bmp:Bitmap = new Bitmap(myBitmapData);
this.addChild(bmp);

[iquaani]

Code:

import flash.display.Bitmap;
import flash.display.BitmapData;

var myBitmapData:BitmapData = new BitmapData(80, 20);
var bmp:Bitmap = new Bitmap(myBitmapData);
this.addChild(bmp);

yep, i got it.
But i still have to use UIComponent and Sprite to show it on a panel or canvas etc..

[flexy]

That's right, you can't add this directly as a child of a UIComponent. Add it as a child to a Sprite or Shape Object, then add the Sprite/Shape Object to your UIComponent.

 

[iquaani]

There's a good source example at the bottom of this page to get you going.

 

I'm really going to cause a gray hair to you  

Back to the example class on the bottom of that link you posted. I tryied to use that class using same methods by creating an object. But i'm not able to have bitmap from it to my canvas. I think that i'm close, please be patient  

I still have my canvas id="surface" where i'm trying to draw it

Code:

public function Pitmapp():void
                  {
                        var pitmappi:BitmapDataExample = new BitmapDataExample();
                  
                        
                        var mySprite:Sprite = new Sprite();
                              mySprite.addChild(pitmappi);
                        var comp:UIComponent = new UIComponent();
                              comp.addChild(mySprite);
                        
                        surface.addChild(comp);
                        
                  }

If i understood it right - class constructor should return a bitmap ??
I think that i don't have to use Sprite cos the class already extends Sprite ?

[iquaani]

Here is the answer to last question: Because the class extends Sprite there is no need to make new Sprite object.

Just..

Code:

var comp:UIComponent = new UIComponent();
                              comp.addChild(pitmappi);
                        
                        surface.addChild(comp);

[flexy]

All-in-all a great thread showing some good work-thoughs and problem solving. Thanks iquaani.

I think we're all a little bit more wiser about how to use the BitmapData class now.