2 Replies Latest reply on Sep 12, 2007 12:23 PM by ProfessorC

    Issues scrolling a scaled image.

    ProfessorC Level 1
      I have a very simple Flex 2 app that uses a canvas container to scroll the display of a child image element.

      Consider the following mxml, with three accompanying images: 300x100px, 300x200px, and 500x600px.

      The canvas has:
      - both scroll policies set to auto (thought eventually, horz will be set to off)
      - fixed width of 316px (300 + the width of the vertical scrollbar)

      The child image has:
      - fixed width of 300px
      - maintainAspectRatio set to true

      Loading the 300x100px image into the image component results in no scrollbars, as expected.

      Loading the 300x200px image into the image component results in a vertical scrollbar only, as expected, and when the scrollbar is at the bottommost position in the track we see the bottommost edge of the image, also as expected.

      Loading the 500x600px image into the image component results in a vertical scrollbar only, again as expected (since the width of the image component is set to 300 and scaling occurs), but now as we scroll down it goes well beyond the bottom edge of the image, NOT as expected.

      I need the scrollbar in this last case to allow to user to scroll down only as far as the bottom edge of the image (just like with the 300x200px image).

      Is there a workaround to fix, or something else I can do to enforce this behavior?


      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Script>
      <![CDATA[
      private function changePicture(pictNum:int):void{
      switch (pictNum){
      case 1:
      imageCroppedImage.source="red-block-300x100.jpg";
      break;
      case 2:
      imageCroppedImage.source="blue-block-300x200.jpg";
      break;
      case 3:
      imageCroppedImage.source="green-block-500x600.jpg";
      break;
      }
      }
      ]]>
      </mx:Script>

      <mx:Canvas id="canvasViewPort" width="316" height="100" verticalScrollPolicy="auto" horizontalScrollPolicy="auto" x="20" y="20">
      <mx:Image id="imageCroppedImage" width="300" maintainAspectRatio="true" />
      </mx:Canvas>

      <mx:Button label="Picture 1 (300x100)" click="changePicture(1)" x="20" y="150" />
      <mx:Button label="Picture 2 (300x200)" click="changePicture(2)" x="20" y="185" />
      <mx:Button label="Picture 3 (500x600)" click="changePicture(3)" x="20" y="220" />
      </mx:Application>


      Thanks in advance!
      -Carl