Resize component to scale

Question

I have SampleComponent:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         resizeMode="scale">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Image source="@Embed('assets/images/soLogo.jpg')" width="100%" height="100%" scaleMode="stretch" />

</s:Group>

It features just an image that stretches to fill the whole component area, the component resizeMode is set to "scale".

I put this component into an application with the below code:

<local:SampleComponent id="sample" 
                       width="100%" 
                       height="{sample.width * 0.2961165048543689}" />

The width is set to 100% of the applications width. In my attempt to scale the component correctly I set the height to a percentage of the width.

When the application window is resized, it looks like this:

Resizing to scale

The last image here is my problem, it exceeds the bounds of the application.

How can I have the component resize without exceeding the bounds of the parent container?
Is there a more correct way of scaling components?

Is the point to keep the image aspect ratio? (scaleMode="letterbox") Why can't you simply set the height of the component to 100%? — NTyler, Apr 16 '13 at 18:41
The point is to keep the ratio, but also to ensure the component does not exceed the bounds of the application. Also, the question is about maintaining the ratio of the component, not the image, the component could contain anything — Drahcir, Apr 16 '13 at 19:23

score 3 · Answer 1 · edited May 23 '17 at 11:44

3

This post answered with this library

I think you could probably also do it with something like this:

width="{Math.min(container.width, container.height * ratio)}" 
height="{Math.min(container.height, container.width / ratio)}"

edited May 23 '17 at 11:44

Community

1
1

answered Apr 16 '13 at 19:34

NTyler

1,397
1
12
20

Thanks, I think the Math.min will work, but that library looks useful for when I'm next working with CS6 instead of Flex. – Drahcir Apr 16 '13 at 19:50

Drahcir · Accepted Answer · 2013-05-14T13:15:53.430

I think I've figured out a better way of doing this:

Set the resizeMode of the component to scale
Add a listener for the updateComplete event, in the listener manipulate the $scaleX and $scaleY properties of the mx_internal namespace.

Example:

<s:Group id="myContainer" resizeMode="scale">
    <!-- Some children, images etc... -->
    <s:updateComplete>
    <![CDATA[
            import mx.core.mx_internal;

            myContainer.mx_internal::$scaleX = Math.min(myContainer.mx_internal::$scaleX, myContainer.mx_internal::$scaleY);
            myContainer.mx_internal::$scaleY = myContainer.mx_internal::$scaleX;
    ]]>
    </s:updateComplete>
</s:Group>

This way is better becuase...

It allows for not knowing the aspect ratio in advance.
it also allows for complex layouts and many children where the ratio can change at runtime.

If used often a library function could be created instead.

Resize component to scale

2 Answers2