And for anyone that may be running into a similar issue here is a basic (and somewhat messy) example of how to accomplish what has been discussed in this thread. I've posted the entire app, so you should be able to simply copy and paste..
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" creationComplete="createImage();"> <mx:Script> <![CDATA[ import mx.graphics.ImageSnapshot; import mx.controls.SWFLoader; import mx.utils.ObjectUtil; import mx.graphics.codec.PNGEncoder; var displayObject2:Canvas; var pc:Canvas; var oldScale:Number = 1; var newScale:Number = 2; var multiplier:Number = newScale / oldScale; private function createImage():void { displayObject2 = new Canvas(); //displayObject2.addEventListener( Event.ADDED_TO_STAGE, createBitmap ); displayObject2.setStyle("backgroundColor","0xc0c0c0"); displayObject2.width = myCanvas.width; displayObject2.height = myCanvas.height; // Add the children for( var x=0; x<myCanvas.numChildren; x++ ) { var curChild:SWFLoader = myCanvas.getChildAt( x ) as SWFLoader; var newChild:SWFLoader = new SWFLoader(); newChild.source = curChild.source; newChild.x = curChild.x; newChild.y = curChild.y; //newChild.addEventListener( Event.INIT, scaleChild ); displayObject2.addChild( newChild ); } displayObject2.scaleX = displayObject2.scaleY = 2; displayObject2.name = "scaledCanvas"; pc = new Canvas(); pc.y = 300; addChild( pc ); pc.addChild( displayObject2 ); } private function scaleChild( e:Event ):void { e.target.width = e.target.contentWidth * multiplier; e.target.height = e.target.contentHeight * multiplier; } private function createBitmap( e:Event ):void { var w = pc.width; var h = pc.height; var bitmapdata:BitmapData = new BitmapData( pc.width, pc.height, true, 0x00C0C0C0 ); bitmapdata.draw( pc ); var bytearray:ByteArray; var encoder:PNGEncoder = new PNGEncoder(); bytearray = encoder.encode( bitmapdata ); myImage.source = bytearray; } private function scaleAndGrab( e:Event ):void { myCanvas.width *= multiplier; myCanvas.height *= multiplier; // Add the children for( var x=0; x<myCanvas.numChildren; x++ ) { var curChild:SWFLoader = myCanvas.getChildAt( x ) as SWFLoader; curChild.width *= multiplier; curChild.height *= multiplier; } var w = myCanvas.width; var h = myCanvas.height; var bitmapdata:BitmapData = new BitmapData( w, h, true, 0x00C0C0C0 ); bitmapdata.draw( myCanvas ); var bytearray:ByteArray; var encoder:PNGEncoder = new PNGEncoder(); bytearray = encoder.encode( bitmapdata ); myImage.source = bytearray; } ]]> </mx:Script> <mx:Canvas x="10" y="10" width="200" height="200" backgroundColor="#FFFFFF" id="myCanvas" name="myCanvas"> <mx:SWFLoader x="10" y="30"> <mx:source>http://media.dev.freakatars.com.s3.amazonaws.com/2/0/2d78ad53630bb25563ab28da6c9a3968.swf</mx:source> </mx:SWFLoader> <mx:SWFLoader x="60" y="53"> <mx:source>http://media.dev.freakatars.com.s3.amazonaws.com/2/0/5a97b1888731df7c766a4e274d766b20.swf</mx:source> </mx:SWFLoader> <mx:SWFLoader x="122" y="76"> <mx:source>http://media.dev.freakatars.com.s3.amazonaws.com/2/0/605299b92bc3993319ceb9490eb52b0f.swf</mx:source> </mx:SWFLoader> </mx:Canvas> <mx:Button x="119" y="218" label="Create PNG" click="createBitmap(event);"/> <mx:SWFLoader x="460" y="10" id="myImage"/> </mx:Application> --- In flexcoders@yahoogroups.com, "Ryan Graham" <[EMAIL PROTECTED]> wrote: > > > Oh, I see... This seems like a bit of a hack, and could probably be > coded a bit cleaner, but maybe do the drawing from a parent container > and just set a clipping rectangle equal to the location and size of the > scaled object? If it works, I'd be curious to know. Here, the stage was > used: > > > > bitmapdata.draw( Application.application.stage, null, null, null, new > Rectangle(displayObject2.x, displayObject2.y, displayObject2.width, > displayObject2.height)); > > > > HTH, > > Ryan > > From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On > Behalf Of Kyle > Sent: Tuesday, December 09, 2008 2:18 PM > To: flexcoders@yahoogroups.com > Subject: [flexcoders] Re: getBitmapData from a scaled display object > > > > Hey Ryan, > > Thanks for the thought; however, this doesn't solve my problem. The > problem is this: The children of the canvas that I want to scale up > are all vector (swf files). If I use a matrix or any other method to > scale up the graphics after they are in raster format (bitmapdata) > then the quality will be decreased severely. So what I am trying to > accomplish is to scale up canvas container, and all of its' children, > prior to getting the bitmapdata. This way the resulting bitmap will > not be pixelated or otherwise lose quality. > > The issues that I am experiencing when using scalex/scaley on the > canvas container is that the scale of the container and its' children > is apparently ignored by getBitmapData as the resulting output is at > the original size of the canvas (prior to it being scaled up). The > example app that I pasted below should illustrate this issue. > > Any other ideas appreciated. > > Thanks! > > -Kyle > > --- In flexcoders@yahoogroups.com <mailto:flexcoders%40yahoogroups.com> > , "Ryan Graham" <Ryan.Graham@> wrote: > > > > > > You may have to play with some of the positioning, but use the second > > parameter of the bitmapData.draw() function to pass in the object's > > transform matrix as a start. This should get you closer... > > > > > > > > bitmapdata.draw( displayObject2, displayObject2.transform.matrix ); > > > > > > > > HTH, > > > > Ryan > > > > > > > > From: flexcoders@yahoogroups.com <mailto:flexcoders%40yahoogroups.com> > [mailto:flexcoders@yahoogroups.com <mailto:flexcoders%40yahoogroups.com> > ] On > > Behalf Of Kyle > > Sent: Tuesday, December 09, 2008 12:21 PM > > To: flexcoders@yahoogroups.com <mailto:flexcoders%40yahoogroups.com> > > Subject: [flexcoders] getBitmapData from a scaled display object > > > > > > > > > > I'm trying to figure out the easiest way to get bitmapdata from a > > displayobject that has had its scalex/scaley altered. In the test > > example I have listed below, I have a canvas container that has 3 > > children (swfLoader components). I set the scalex/scaley of the canvas > > container to 2 and its' children are scaled up proportionally; > > however, when I try to get bitmapdata from the canvas, it does not > > recognize the scaled size of the canvas container and as such when I > > create a new bitmap using the data it is still at the original size. > > Any ideas on how I can get bitmapdata that will match the width/height > > of the scaled canvas would be greatly appreciated! > > > > <?xml version="1.0" encoding="utf-8"?> > > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; > > layout="absolute" creationComplete="createImage()"> > > > > <mx:Script> > > <![CDATA[ > > import mx.controls.SWFLoader; > > import mx.utils.ObjectUtil; > > import mx.graphics.codec.PNGEncoder; > > > > var displayObject2:Canvas; > > > > private function createImage():void > > { > > displayObject2 = new Canvas(); > > displayObject2.setStyle("backgroundColor","0xc0c0c0"); > > displayObject2.width = myCanvas.width; > > displayObject2.height = myCanvas.height; > > for( var x=0; x<myCanvas.numChildren; x++ ) > > { > > var curChild:SWFLoader = myCanvas.getChildAt( x ) as SWFLoader; > > var newChild:SWFLoader = new SWFLoader(); > > newChild.source = curChild.source; > > newChild.x = curChild.x; > > newChild.y = curChild.y; > > > > displayObject2.addChild( newChild ); > > } > > > > displayObject2.scaleX = displayObject2.scaleY = 2; > > displayObject2.y = 300; > > addChild( displayObject2 ); > > } > > > > private function scaleChild( e:Event ):void > > { > > e.target.width = e.target.contentWidth * 2; > > e.target.height = e.target.contentHeight * 2; > > } > > > > private function createBitmap( e:Event ):void > > { > > var w = displayObject2.width; > > var h = displayObject2.height; > > var bitmapdata:BitmapData = new BitmapData( w, h, true, 0x00C0C0C0 ); > > bitmapdata.draw( displayObject2 ); > > > > var bytearray:ByteArray; > > var encoder:PNGEncoder = new PNGEncoder(); > > bytearray = encoder.encode( bitmapdata ); > > myImage.source = bytearray; > > } > > ]]> > > </mx:Script> > > <mx:Canvas x="10" y="10" width="200" height="200" > > backgroundColor="#FFFFFF" id="myCanvas"> > > <mx:SWFLoader x="10" y="30"> > > > > > <mx:source>http://media.dev.freakatars.com.s3.amazonaws.com/2/0/2d78ad53 > > 630bb25563ab28da6c9a3968.swf</mx:source> > > </mx:SWFLoader> > > <mx:SWFLoader x="60" y="53"> > > > > > <mx:source>http://media.dev.freakatars.com.s3.amazonaws.com/2/0/5a97b188 > > 8731df7c766a4e274d766b20.swf</mx:source> > > </mx:SWFLoader> > > <mx:SWFLoader x="122" y="76"> > > > > > <mx:source>http://media.dev.freakatars.com.s3.amazonaws.com/2/0/605299b9 > > 2bc3993319ceb9490eb52b0f.swf</mx:source> > > </mx:SWFLoader> > > </mx:Canvas> > > <mx:Button x="119" y="218" label="Create PNG" > > click="createBitmap(event);"/> > > <mx:Image x="460" y="10" id="myImage"/> > > </mx:Application> > > > > > > > > > > > > This message is private and confidential. If you have received it in > error, please notify the sender and remove it from your system. > > > > > > > > This message is private and confidential. If you have received it in error, please notify the sender and remove it from your system. >
