1 Reply Latest reply on Mar 23, 2009 3:27 PM by ahmed.malik

    Simple way to pan/zoom/rotate a Canvas

      Hi, I am struggling with the following issue and would appreciate any help. I am using Flex Builder 3.

      I have a canvas with various content which is too big to display on the screen at once. I have another canvas which serves as the "viewport" and basically serves as a fixed-size window onto the large content canvas. The "content" canvas is a child of the "viewport" canvas. I can use the viewport's scrollRect property to pan the content with no problem. But I'd also like to be able to rotate and zoom the content, and I'd like the rotate and zoom to be done relative to the center point of the viewport, i.e. the center point of the scrollRect. Here is where I run into problems. I could modify scaleX, scaleY, and rotation on the content canvas, but this is applied against the (0,0) origin rather than the center of the viewport scrollRect, and there doesn't seem to be a way to override the origin.

      So I tried using the Zoom and Rotate effect classes, since these allow me to explicitly set the origin. This approach seems to work well but only as long as I have only one active effect (zoom or rotate) at a time. The problem seems to be that, after having previously panned with the scrollRect and Rotated the canvas, Zooming out and then in again will _not_ return to the original state. Rotating a previously zoomed canvas will cause the content to move out in a spiral pattern rather than around in a circle. Zooming seems to be affecting the coordinates in a way that I am not understanding. I am using the following to determine the point of origin for rotating and zooming:


      So is there either (A) a simple way to do this in Flex / Flash which I am missing, or (B) an existing component, possibly 3rd-party, which offers this functionality?