2

我有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%。在我尝试正确缩放组件时，我将高度设置为宽度的百分比。

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

按比例调整大小

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

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

2 回答 2

3

这篇文章用这个图书馆回答

我想你也可以这样做：

width="{Math.min(container.width, container.height * ratio)}" 
height="{Math.min(container.height, container.width / ratio)}"
于 2013-04-16T19:34:24.857 回答
0

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

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

例子：

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

这种方式更好，因为...

  • 它允许事先不知道纵横比。
  • 它还允许复杂的布局和许多比例可以在运行时改变的子节点。

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

于 2013-05-14T13:02:35.030 回答