0 Replies Latest reply on Jun 30, 2009 7:27 PM by TurtleCruiser

    Rotated image overlaps other controls

    TurtleCruiser

      Hi, I am working on an AIR app involving images. One of the functionalities is viewing as well as rotating images. I made a simple test app to illustrate this portion:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
          <mx:Script>
              <![CDATA[
                  private function rotate():void
                  {
                      var bitmap:Bitmap = Bitmap(img.content);
                      var matrix:Matrix = bitmap.transform.matrix;
                      var centerX:Number = bitmap.width/2;
                      var centerY:Number = bitmap.height/2;
                      matrix.translate(-centerX, -centerY);
                      matrix.rotate(90*Math.PI/180);
                      matrix.translate(centerY, centerX);
                      bitmap.transform.matrix = matrix;
                  }
              ]]>
          </mx:Script>
         
          <mx:Text width="100%" text="Some text"/>
          <mx:Image id="img" width="100%" height="100%" source="test.jpg" horizontalAlign="center" verticalAlign="middle"/>
          <mx:Button label="rotate 90" click="rotate()"/>
      </mx:WindowedApplication>

       

      The application window has text on the top and a button on the bottom, with the image in the middle. Each click of the button rotates the image by 90 degrees.

       

      On launch, the app works great. It fetches the image file and fits it to the Image container. As I resize the application, the image also resizes and maintains the position relative to the other controls. Top text and bottom button are where they should be. All good. Let's assume the image is landscape/wide. After I perform the rotate 90 degrees by clicking the button, although the image is rotated and now in portrait orientation, the bottom portion of the image is now out of the image boundary and overlapping the button.

       

      Is there a way to tell the image to fit the content to the container again? Basically, re-layout the whole thing as if the image is in this new orientation.

       

      I suppose I can try to figure out a change in scale and resize the image, but I am not sure if this will hold when the user resizes the application. Also, the rotated image is now rather far to the left, as the "top left" corner is where a landscape image would be. For a portait orientation that's centered horizontally, it should be further to the right. I suppose I can also come up with some formula to center the rotated image. It just seems that the application already has all this logic built in, as it did exactly what I wanted when the image was loaded initially. If I can just ask the application to do it again. Note that similar issue occurs if the image starts out in portrait orientation and is rotated to landscape (too far to the right).

       

      Thanks in advance for the help.

       

      Will