I’m not sure what you are trying to achieve.  You either just want the label to scale and keep it in the center, or you really do want the entire inner canvas to scale.  It is unclear from your code because you are binding inner.width and inner.height to the parent.  To do the latter, you want to pick a starting value and work from there otherwise any resize of the app resets the size of the inner canvas.  To do the former, you can just reposition the label as the attached code shows.

 

It might help you to understand a concept I call the magnifying glass.  Each component is actually viewed from its parent through a magnifying glass (it is actually a transform matrix).  That means that what the component thinks its size is and what the parent thinks it size is can be two different numbers.  Various properties in the framework are assigned to properties above the magnifying glass and others to properties below.

 

Above: width, height, scaleX, scaleY

Below: unscaledWidth, unscaledHeight

 

The relationship is: width/scaleX = unscaledWidth (and the same for height)

 

Components lay themselves out assuming they have (unscaledWidth,unscaledHeight) pixels to fill.  The magnifying glass magnifies the component such that it occupies (width,height) pixels in the parent.  Let’s say the label is 100x20.  If you set its scaleX and scaleY, the label still thinks it is 100x20.  To the parent, it covers 150x30 pixels and so its width and height are 150 and 30.  If the label also used 150 x 30 it would draw too large and you’d get twice the magnification.  It is easier to visualize using a TextInput.  It has a two pixel border that would be drawn for 100 pixels across the top and bottom and then the magnifying glass would scale it up so it takes up 150 pixels and looks 3 pixels thick.

 

So, if you really want to scale the inner canvas, you have to give it a size independent of the parent otherwise you can’t really scale it w/o also cropping it.  Once you do that, the outer canvas should verify the size of the inner canvas and then set scrollpositions accordingly.

 

Here is the code for the first case.  You’ll have to provide more details on the second case such as how you want to determine the initial size of the canvas:

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute">

<mx:Script>

<![CDATA[

private function onclick():void

{

            inner.scaleX *= 1.5

            inner.scaleY *= 1.5

 

// DOESN'T WORK

//outer.horizontalScrollPosition = outer.maxHorizontalScrollPosition/2

//outer.verticalScrollPosition = outer.maxVerticalScrollPosition/2

 

}

]]>

</mx:Script>

 

 

<mx:Canvas autoLayout="true" id="outer" width="100%" height="100%"

            horizontalScrollPolicy="on" verticalScrollPolicy="on">

            <mx:Canvas autoLayout="false" id="inner" click="onclick()"

                        backgroundColor="0xFF0000" width="100%"

                        height="100%" horizontalScrollPolicy="off"

                        verticalScrollPolicy="off">

            <mx:Label id="center" text="STAY CENTERED PLEASE"

                        x="{inner.width/inner.scaleX/2-center.width/2}"

                        y="{inner.height/inner.scaleY/2-center.height/2}"/>

            </mx:Canvas>

</mx:Canvas>

</mx:Application>

 

 

 


From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of charles_flex
Sent: Friday, October 20, 2006 7:37 AM
To: [email protected]
Subject: [flexcomponents] Dealing with scrollbar

 

Hi,

Here is a piece of code to focus on my problem.

When i make a scale operation on the inner canvas, the canvas growth
and my problem is that i want the label stay on center of the page.
How can i deal with outer canvas scrollbars to do that?

Thanks,

Charles

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
private function onclick():void
{
inner.scaleX *= 1.5
inner.scaleY *= 1.5

// DOESN'T WORK
//outer.horizontalScrollPosition = outer.maxHorizontalScrollPosition/2
//outer.verticalScrollPosition = outer.maxVerticalScrollPosition/2

}
]]>
</mx:Script>


<mx:Canvas autoLayout="true" id="outer" width="100%" height="100%"
horizontalScrollPolicy="on" verticalScrollPolicy="on">
<mx:Canvas autoLayout="false" id="inner" click="onclick()"
backgroundColor="0xFF0000" width="{parent.width}"
height="{parent.height}" horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Label id="center" text="STAY CENTERED PLEASE"
x="{inner.width/2-center.width/2}"
y="{inner.height/2-center.height/2}"/>
</mx:Canvas>
</mx:Canvas>
</mx:Application>

__._,_.___


SPONSORED LINKS
Software development tool Application development software Development software
Development outsourcing software Embedded software development

Your email settings: Individual Email|Traditional
Change settings via the Web (Yahoo! ID required)
Change settings via email: Switch delivery to Daily Digest | Switch to Fully Featured
Visit Your Group | Yahoo! Groups Terms of Use | Unsubscribe

__,_._,___

Reply via email to