[flexcoders] Issues scrolling a scaled image. Can it be fixed?

[carl_steinhilber]

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

Consider the following mxml, with three images: 300x100px, 300x200px,
and 500x600px. 
The canvas has:
- both scroll policies set to auto (thought eventually, horz will be
set to off
- fixed with 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 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 something I can do to enforce this rule?


<?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