I wanted to create a Flex Canvas-based component that acted like a camera looking down on a tabletop containing objects. Any item added to the canvas would automatically be able to be dragged as a group and individually, while the whole view could be zoomed and rotated. Here is the result:

Download Source Here

This component uses the Draggable Behavior classes described in this post.

By default the canvas center point is the center of the canvas, obtained by retrieving one half of the width and height of the canvas. This way the center point always remains in the center (+/- the x,y center point offsets) of the canvas even if the canvas is resized. However, the center point can be made to remain at a specific x,y coordinate by binding the x,y center point offset to negative one half the width and height of the canvas and adding x and y values of a desired amount. The following example keeps the center point at the x,y coordinates 100,100, even if the canvas is resized:

<ab:TransformationalCanvas
id="tcanvas" 
centerPointOffsetX = "{-(tcanvas.width/2)+100}"
centerPointOffsetY = "{-(tcanvas.height/2)+100}"
>

Also, note that the Transformational Canvas origin x,y (0,0) coordinate is at the center point, not at the upper-lefthand corner. That means that children placed at 0,0 will appear at the center point, not at the upper-lefthand corner.

Please post bugs, questions, etc.

This entry was posted on Wednesday, May 14th, 2008 at 7:38 pm and is filed under AS3, Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.