Flex image component not canvas container when added to canvas.

Question

I am adding a flex image component to a mx:canvas component with a fairly large image. I have the horizontal and vertical scroll policies set to "on", but when I add the image to the canvas, it doesn't expand to show the whole image (the scrollbars aren't activated).

Anybody else have this issue.

The code is pretty straightforward:

<mx:Canvas  id="myCanvas" minWidth="0" minHeight="0"  horizontalScrollPolicy="on" verticalScrollPolicy="on">



    </mx:Canvas>

and the script adding the image

var newImg:Image = new Image();
newImg.source = $value.sourceImg;
newImg.x = $value.positionX;
newImg.y = $value.positionY;
newImg.scaleX = $value.scaleX * _scaleRatio ;
newImg.scaleY = $value.scaleY * _scaleRatio;
newImg.rotation = $value.rotation;
myCanvas.addChild(newImg);

Answer 1

It would be helpful if you posted your code, but without seeing it I would recommend setting minWidth="0" on the canvas. This is an old trick to force a re-measure of the canvas so it shows the scroll bars properly. Hope that helps.

Answer 2

Ok, So I had to use clipCOntent = true. I had clipContent="false", I thought the meant that it would clip the image and anything outside the bounds could just be scrolled, buut it actually just clips it and doesn't offer a scroll.

Answer 3

Hi pfunc

Try using canvas.rawChildren.addChild(img) instead of canvas.addChild(img). That's worked for me before, otherwise you'll need to hook into the Flex component measuring system - but this is very seldomly necessary.

Cheers

Answer 4

Hi

Create a first canvas (viewCanvas) and place another canvas inside it (imageCanvas).

Set the scroll policies on the imageCanvas to 'off'. This should work, and the viewCanvas should have scrollbars. Note that no width/height are specified on the imageCanvas or image in code below

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Canvas id="viewCanvas" x="95" y="65" width="169" height="159">

        <mx:Canvas id="imageCanvas" x="0" y="0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
            <mx:Image x="0" y="0">
                <mx:source>http://www.beach-holiday.cn/beach-holiday/pics/2009/09/florida-fort-lauderdale.jpg&lt;/mx:source&gt;
            </mx:Image>
        </mx:Canvas>

    </mx:Canvas>

</mx:Application>