Flex Spark 图像调整大小以适合容器
Flex Spark Image Resize to fit container
我正在使用以下代码将图像加载到屏幕上:
<s:Scroller xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%"
height="100%">
<s:VGroup width="100%" horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalAlign="top">
<s:Label width="100%" text="Being Active" fontSize="14" fontFamily="Black"/>
<s:Image fillMode="scale" smooth="true" scaleMode="letterbox" verticalCenter="0" horizontalCenter="0" width="100%" source="@Embed('assets/img/q3/q3c1all.png')"/>
....
....
</s:VGroup>
</s:Scroller>
在附图中,它有三张图片
1.建造者视图
2. 最终设计(设计师所期望的)
3. 渲染输出(用户将看到的)
由于 scaleMode 信箱,图像上方和下方有很多 space 空白。这打破了这一层。有人可以建议我如何使输出看起来像设计预览(标题为要求)
如何在不扭曲的情况下按比例缩放图像(就像在 CSS 中所做的那样)。
对于那些为这个问题而苦苦挣扎的人 - 解决方案是使用它可以让您完全控制位图。需要注意的一件事是 - 如果您打算对图像使用交互/事件,请将其包装在容器中并向其添加点击事件。
我不知道这是否是最佳解决方案,但它对我有用:)
我正在使用以下代码将图像加载到屏幕上:
<s:Scroller xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%"
height="100%">
<s:VGroup width="100%" horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalAlign="top">
<s:Label width="100%" text="Being Active" fontSize="14" fontFamily="Black"/>
<s:Image fillMode="scale" smooth="true" scaleMode="letterbox" verticalCenter="0" horizontalCenter="0" width="100%" source="@Embed('assets/img/q3/q3c1all.png')"/>
....
....
</s:VGroup>
</s:Scroller>
在附图中,它有三张图片 1.建造者视图 2. 最终设计(设计师所期望的) 3. 渲染输出(用户将看到的)
由于 scaleMode 信箱,图像上方和下方有很多 space 空白。这打破了这一层。有人可以建议我如何使输出看起来像设计预览(标题为要求)
如何在不扭曲的情况下按比例缩放图像(就像在 CSS 中所做的那样)。
对于那些为这个问题而苦苦挣扎的人 - 解决方案是使用它可以让您完全控制位图。需要注意的一件事是 - 如果您打算对图像使用交互/事件,请将其包装在容器中并向其添加点击事件。
我不知道这是否是最佳解决方案,但它对我有用:)