调整组件大小以缩放答案

【问题标题】：Resize component to scale调整组件大小以缩放
【发布时间】：2013-04-16 18:22:39
【问题描述】：

我有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>

它的特点只是一个图像可以拉伸以填充整个组件区域，组件resizeMode 设置为“缩放”。

我用下面的代码将此组件放入一个应用程序中：

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

宽度设置为应用程序宽度的 100%。在尝试正确缩放组件时，我将高度设置为宽度的百分比。

当应用程序窗口被调整大小时，它看起来像这样：

这里的最后一张图片是我的问题，它超出了应用程序的范围。

如何在不超出父容器边界的情况下调整组件大小？
有没有更正确的缩放组件的方法？

【问题讨论】：

是保持图像纵横比的重点吗？ (scaleMode="letterbox") 为什么不能简单地将组件的高度设置为100%？
重点是要保持比例，还要保证组件不超出应用范围。另外，问题是关于保持组件的比例，而不是图像，组件可以包含任何东西

标签： apache-flex flex-spark

【解决方案1】：

This post 回复this library

我认为您可能也可以这样做：

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

【讨论】：

谢谢，我认为 Math.min 可以工作，但是当我下次使用 CS6 而不是 Flex 时，该库看起来很有用。

【解决方案2】：

我想我已经找到了更好的方法：

将组件的resizeMode设置为scale
为updateComplete事件添加监听器，在监听器中操作mx_internal命名空间的$scaleX和$scaleY属性。

例子：

<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>

这种方式比较好，因为……

它允许事先不知道纵横比。
它还允许复杂的布局和许多子元素，其中比率可以在运行时改变。

如果经常使用，可以创建一个库函数。

【讨论】：