2 Replies Latest reply on Aug 22, 2009 5:59 AM by DWDurkee

    Canvas Hierarchy to BitmapData

    DWDurkee

      I'm trying to capture the graphic contents of a hierarchy of Canvases to a BitmapData. I'm using BitmapData.draw and passing it the Canvas that contains the hierarchy. However I am only capturing the contents of the root Canvas's Graphics object. None of the contained objects are showing up in the BitmapData. I am creating a hierarchy of Canvases in order to get graphics effects (drawing with a hierarchy of clipping paths) that I can't do in a single Graphics object. Is there any way to flatten this out to a single bitmap?

       

      David

        • 1. Re: Canvas Hierarchy to BitmapData
          ShardulSingh Level 3

          Hi,

          Although I dont understand your problem properly,but still trying to Resolve it.

          Below is the code in which I am having a canvas inside canvas and so on.

          Then I am capturing the bitmapdata of the outer canvas, and creating a new Image

          with that bitmapdata.It is creating the same childeren heerarchy as is in the

          oringional Canvas.The code is below.

           

           

           

          Main.MXML

           

           

           

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">

          <mx:Script>

          <![CDATA[

          import mx.core.UIComponent;

          public function CreateBitmapImage() : BitmapData

          {

          var bitmapData:BitmapData = getBitmapData( UIComponent( sourceCanvas ) );

          targetImage.source = new Bitmap( bitmapData );

          return bitmapData;

          }

           

          private function getBitmapData( target : UIComponent ) : BitmapData

          {

          var bitmapData : BitmapData = new BitmapData( target.width, target.height,true, 0x00000000);

          bitmapData.draw( target );

          return bitmapData;

          }

           

          ]]>

          </mx:Script>

           

          <mx:Canvas id="sourceCanvas" width="500" height="500" backgroundColor="0xFFFFFF">

          <mx:Canvas width="400" height="400" backgroundColor="0xFF0000">

          <mx:Canvas width="300" height="300" backgroundColor="0x000FF00">

          <mx:Canvas width="200" height="200" backgroundColor="0x0000FF"/>

          </mx:Canvas>

          </mx:Canvas>

          </mx:Canvas>

           

          <!--This will be the Image Created by the BitmapData of the 'sourceCanvas'.-->

          <mx:Image id="targetImage" creationComplete="CreateBitmapImage()"/>

           

          </mx:Application>

           

           

           

           

          Pls let me know if you have any problem,or i am unable to understand ur problem.

           

           

          Shardul Singh Bartwal

          • 2. Re: Canvas Hierarchy to BitmapData
            DWDurkee Level 1

            Since posting this I have found that it works if I use a Canvas that was already in my view hierarchy (the one I was displaying the content in in the first place) but not if I create a new one as I was doing. Even if I add the new one to the view hierarchy I don't get its children in the bitmap. Maybe it's using it before it's fully initialized that doesn't work.

             

            David