Inner canvas does not autoposition to center

[hari-kj]

Hi,

I'm sort of like a newbie to Flex and this issue is baffling me.


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Canvas x="86" y="30" width="686" height="569" verticalCenter="0" horizontalCenter="0" borderStyle="outset" borderColor="#000000">
<mx:Canvas width="200" height="200" verticalCenter="0" horizontalCenter="0" id="mainCanvas" scaleX="{zoomPanel.value}" scaleY="{zoomPanel.value}" horizontalScrollPolicy="off" verticalScrollPolicy="off" backgroundColor="#FFFFFF" backgroundAlpha="1.0" borderStyle="inset" borderColor="#FF0000" alpha="1.0">
</mx:Canvas>
</mx:Canvas>
<mx:HSlider x="47" y="7" id="zoomPanel" minimum="0.1" maximum="10" enabled="true" liveDragging="true" width="177" value="1"/>
</mx:Application>



When I use the slider to zoom the inner canvas 'mainCanvas' it zooms correctly but the parent canvas's scrolls does not allow me to see the right and the top edges... Am I missing something obvious here.

any help would be grateful

[mattb]

That's actually pretty interesting! I think the problem is that your outer canvas won't let you scroll to an x,y position less than 0,0. As the inner Canvas gets bigger, the calculated x,y position decreases until it ends up going less than 0,0.

You'll probably need to add some extra logic to calculate the x/y positions manually. this works:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Canvas id="outer" x="86" y="30" width="686" height="569" verticalCenter="0" horizontalCenter="0" borderStyle="outset" borderColor="#000000">
<mx:Canvas width="200" height="200" id="mainCanvas" scaleX="{zoomPanel.value}" scaleY="{zoomPanel.value}" horizontalScrollPolicy="off" verticalScrollPolicy="off" backgroundColor="#FFFFFF" backgroundAlpha="1.0" borderStyle="inset" borderColor="#FF0000" alpha="1.0"
resize="resizeInner()">
</mx:Canvas>
</mx:Canvas>
<mx:HSlider x="47" y="7" id="zoomPanel" minimum="0.1" maximum="10" enabled="true" liveDragging="true" width="177" value="1"/>

<mx:Script>
<![CDATA[
private function resizeInner():void
{
mainCanvas.x = Math.max(0, (outer.width-mainCanvas.width)/2);
mainCanvas.y = Math.max(0, (outer.height-mainCanvas.height)/2);
}
]]>
</mx:Script>
</mx:Application>