3 Replies Latest reply on Jun 18, 2008 4:35 AM by anirudhs

    Problem with scrolling after rotating image

    Maz_Idr
      Hi,

      I am trying to write a simple image viewer in flex. I came across a problem which I've been trying to solve through the past 4 days. In my example I want to rotate the image and then scroll around once its been rotated (Say after the user would zoom in). If I rotate the image by 90,180 or 270 deg and then move the scroll bars the image disappears. Has anyone else had this problem? Any suggestions welcome, thanks!

      ===================================================================

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Panel x="10" y="10" width="816" height="715" layout="absolute" title="Viewer">
      <mx:Button x="365.5" y="643" label="Rotate" click="rotateImage()"/>
      <mx:VBox id="vb" x="10" y="10" height="604" width="776">
      <mx:Image id="img" width="777" height="618">
      <mx:source>file:///C:/example.jpg</mx:source>
      </mx:Image>
      </mx:VBox>
      </mx:Panel>

      <mx:Rotate id="rotate" angleFrom="{angle-90}" angleTo="{angle}" target="{img}" />

      <mx:Script>
      <![CDATA[

      [Bindable]
      public var angle:int=0;

      private function rotateImage():void {
      rotate.end();
      angle += 90;
      rotate.play();
      }

      ]]>
      </mx:Script>
      </mx:Application>
        • 1. Re: Problem with scrolling after rotating image
          anirudhs Level 2
          Hi,

          Either set the autoLayout attribute of VBox to false or change the VBox into a Canvas.

          VBox will try to position the object without considering the angle it's rotated at. That makes it disappear.
          • 2. Re: Problem with scrolling after rotating image
            Maz_Idr Level 1
            Thanks for a quick response. I did something simillar before (using the Canvas instead of the VBox) your suggestions fix the scrolling issue but it still does not work the way it should. If the rotation is 0 then the scroll bars "fit" the image (So you don't go out and see any white space). If the rotation is say 90 than it doesn't allow the image at full height, little bit of the page and no scroll bar to move down, also it gives you a lot of room to move to the side event though you can already see the image at full width. It's event worse when you do 180 deg rotation. Do you think this is something that is achievable (to have scroll bars that fit the image regardles of the rotation) ? Thanks

            ================================================================================

            <!-- <mx:VBox id="vb" x="10" y="10" height="604" width="776" autoLayout="false"> -->
            <mx:Canvas x="10" y="10" width="776" height="604" autoLayout="false">
            <mx:Image id="img">
            <mx:source>file:///C|/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Winter.jpg</mx:source>
            </mx:Image>
            </mx:Canvas>
            <!-- </mx:VBox> -->
            • 3. Re: Problem with scrolling after rotating image
              anirudhs Level 2
              You'd have to extend the Image control and implement your measure() function by taking the rotation into account as well so that width / height of the component is reported differently than what it actually is based on the angle.

              For some info on this, take a look at TiltingPane.as in Ely's DisplayShelf Component. TiltingPane is for rotation in the Z direction, but it's principle can be applied in your case.