How do I capture a drawn shape as bitmap data using Flex and AIR?

rarid122481
rarid122481 used Ask the Experts™
on
I am drawing a line. It's data type in Flex is UIComponent. I want to draw the shape, convert it to a bitmap, and then save it out as a png. How would I do this? I am currently getting an error on the mouse up event after creating the line that is suppose to capture the data as bitmap. Attached is my code with the error.
private var routeBitMapData:BitmapData;
			private var pngEncoder:PNGEncoder = new PNGEncoder();
			private var routeImageByteArray:ByteArray;
private var drawingShape:UIComponent=new UIComponent();
			private var maskShape:UIComponent=new UIComponent();


protected function createRouteState_enterStateHandler(event:FlexEvent):void
			{
				getAllRoutes();
				
				player_mc.x = 193;
				player_mc.y = 501;
				
				createRouteContainer.addElement(drawingShape);
				
				drawingShape.x = createRouteContainer.x;
				drawingShape.y = createRouteContainer.y;
				
				createRouteContainer.addElement(maskShape);
				maskShape.x = createRouteContainer.x;
				maskShape.y = createRouteContainer.y;
				
				drawMask();
				drawingShape.mask = maskShape; 
				
createRouteContainer.addEventListener(MouseEvent.ROLL_OUT, boardRollOut);
				createRouteContainer.addEventListener(MouseEvent.MOUSE_MOVE, boardMouseMove);
				createRouteContainer.addEventListener(MouseEvent.MOUSE_DOWN, boardMouseDown);
				createRouteContainer.addEventListener(MouseEvent.MOUSE_UP, boardMouseUp);
			}

private function boardMouseDown(e:MouseEvent):void
			{
				if(recordingRoute == true)
				{
					
					var curX:Number=drawingShape.mouseX;
					var curY:Number=drawingShape.mouseY;
					
					startX = curX;
					startY = curY;
					
					doDraw=true;
					
					xPosArray = [];
					yPosArray = [];
					
					currentColor=0xFFCC33;
					
					drawingShape.graphics.lineStyle(lineSize,currentColor);
					drawingShape.graphics.moveTo(curX,curY);
					
					
				}
			}

private function stopMouseTrack(event:TimerEvent):void
			{
				
				routeBitMapData = new BitmapData(drawingShape.width,drawingShape.height);
				routeBitMapData.draw(drawingShape); 
				
				routeImageByteArray = pngEncoder.encode(routeBitMapData);
				
			}

//this is my error
ArgumentError: Error #2015: Invalid BitmapData.
	at flash.display::BitmapData()

this is the line that causes the error:
routeBitMapData = new BitmapData(drawingShape.width,drawingShape.height);

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
"this is the line that causes the error:
routeBitMapData = new BitmapData(drawingShape.width,drawingShape.height);"

As you said this line is causing problem, because the width and height of "drawingShape" is 0, due to which you are getting this error.

Before creating bitmapdata object, make sure you have width and height assigned to you "drawingShape" UIComponent.

performing graphics operation on a UIComponent doesn't set the width and height of UIComponent object, you have to set it explicitely.

"routeBitMapData = new BitmapData(drawingShape.width,drawingShape.height);"
this line will work if supplied width and height is greater than 0

Author

Commented:
i understand. but how would i explicitly set a height and width of a dynamically drawn line in this case?
I guess you must have a defined area for drawing where user can draw.
So you can assign that width and height to your UIComponent.
any luck?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial