我有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%。在我尝试正确缩放组件时,我将高度设置为宽度的百分比。
调整应用程序窗口大小时,它看起来像这样:
这里的最后一张图片是我的问题,它超出了应用程序的范围。
答案 0 :(得分:3)
我认为你可能也会这样做:
width="{Math.min(container.width, container.height * ratio)}"
height="{Math.min(container.height, container.width / ratio)}"
答案 1 :(得分: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>
这种方式更好,因为...
如果经常使用,可以改为创建库函数。