Flex使图像全屏

Question

当我运行图像时，它只出现在中心，中间有2个空白区域。

<s:Image x="0" y="0" height="100%" width="100%" source="@Embed('assets/d.jpg')"/>

如何在移动应用中双击/触摸可以使图像全屏显示（覆盖整个屏幕）？

如果可能，如何将其恢复为非全屏（恢复正常）？

感谢。

图像尺寸：W = 1920，H = 1200

Answer 1

要删除白条，您将设置Image标记的scaleMode。默认为Letterbox;这是你似乎正在使用的。

如果将其设置为拉伸，则会填充空白，不带白色边框。但是，如果不保持纵横比，可能会使图像失真。

Answer 2

<强>问题： 移动设备具有不同的屏幕尺寸。我们需要一个不同屏幕尺寸的图像（Android + iPhone + iPad + iPod等）。

一个解决方案： 我最近不得不处理这个问题，发现这对我来说效果很好。

<s:BitmapImage id="image"
        source="@Embed('assets/images/background_startup.png')" 
        width="100%" height="100%" smooth="true" smoothingQuality="high"
        scaleMode="zoom" horizontalAlign="center"/>

现在你可以看到这样可以在保持纵横比的同时消除白色边框。如果您正在开发一个启动图像（就像您在大多数应用程序启动时开始看到的那样），这是一种非常简单的方法来处理它。请注意，您必须开发兼容多屏幕的图像，或根据屏幕尺寸指定正确缩放的图像。如果你只是想开发一个图像，目前使用的好尺寸是700px宽和1200px高。为什么这么高？因为大多数高分辨率设备使用此屏幕尺寸（让我们考虑这个最大分辨率）。同时，开发比它宽得多的图像有助于我们控制在较小的屏幕尺寸需要时裁剪图像的哪些部分。请注意，只有当您的应用仅以人像运行时，此模型才有效。

正如您在上面所看到的，我们有一个“安全”区域，并且我们可以预期会发现“不安全”。根据我的发现，这个区域的高度大约为100到110px，不应包含重要的文字或信息，但仍然包括背景和边框，所以一切看起来都很好。

Moto Droid Pro

Moto Droid X

iPhone 3GS

希望这有帮助！