CODEWITHSUNDEEP
apache-flexflex-spark
Drahcir
Drahcir

Reputation: 11972

Resize component to scale

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.

Upvotes: 2

Views: 2576

Answers (2)

Drahcir
Drahcir

Reputation: 11972

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.

Upvotes: 0

NTyler
NTyler

Reputation: 1427

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)}"

Upvotes: 3

Related Questions