Flex 使图像全屏显示

发布于 2024-12-01 10:36:46 字数 339 浏览 6 评论 0原文

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

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

如何在移动应用程序上通过双击/触摸使图像全屏显示（覆盖整个屏幕）？

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

谢谢。

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

在此处输入图像描述

原文

when i run the image, it only appear in center with 2 blank white space in between.

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

How can i make an image goes full screen (covering up the whole screen) with double tap/touch on mobile app?

And if possible how to turn it back to non-full screen (back to normal)?

thanks.

image size: W=1920, H=1200

enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自此以后，行同陌路 2024-12-08 10:36:46

要删除白条，您需要设置 scaleMode。默认为信箱；这就是你似乎正在使用的。

如果将其设置为拉伸，那么它将填充空间，而没有白色边框。但是，它可能会因不保持纵横比而使图像变形。

回复收藏 0 原文

枯寂 2024-12-08 10:36:46

问题：
移动设备具有不同的屏幕尺寸。我们需要一张图像在不同的屏幕尺寸（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"/>

现在，如您所见，这消除了白色边框，同时保持了纵横比。如果您正在开发启动图像（就像您在大多数应用程序启动之初看到的那样），这是一种非常简单的处理方法。请注意，您必须开发多屏幕兼容的图像，或根据屏幕尺寸分配适当缩放的图像。如果您只想开发一张图像，目前使用的合适尺寸是 700 像素宽和 1200 像素高。为什么长这么高？因为大多数高分辨率设备都使用此屏幕尺寸（我们将其视为最大分辨率）。同时，如果较小的屏幕尺寸需要，开发一个高度明显高于宽度的图像可以帮助我们控制裁剪图像的哪些部分。请注意，此模型仅在您的应用仅以纵向模式运行时才有效。

在此处输入图像描述

正如您在上面看到的，我们有一个“安全”区域和一个“不安全”区域，我们可以预期被裁剪。据我所知，该区域的高度约为 100 到 110 像素，不应包含重要的文本或信息，但仍包含背景和边框，因此一切看起来仍然不错。

Moto Droid Pro

Moto Droid Pro

Moto Droid X

在此处输入图像描述

iPhone 3GS

在此处输入图像描述

希望这有帮助！

Problem:
Mobile devices come with different screen sizes. And we need an image to look good across different screen sizes (Android + iPhone + iPad + iPod, etc.).

One Solution:
I recently had to deal with this issue and found that this worked well for me.

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

Now as you can see this eliminates the white border's while maintaining aspect ratio. If you are developing a splash image (like the ones you see at the beginning of most application startups) this is a really simple way of taking care of it. Mind that you will have to develop a multi-screen compatible image, or assign a properly scaled image depending on the screen size. If you just want to develop ONE image, a good size that currently employ is 700px wide and 1200px tall. Why so much taller? Because most high-res devices use this screen size (lets consider this the max resolution). At the same time, developing an image that is significantly taller than it is wide helps us control which parts of the image are cropped if a smaller screen size requires it. Mind you this model only works if your app is running in portrait only.

enter image description here

As you can see above we have a "safe" zone and an "unsafe" are we can expect to be cropped. From what I've found this area is about 100 to 110px tall and should not include important text or information but still includes the background and borders so everything still looks good.

Moto Droid Pro

Moto Droid Pro

Moto Droid X

enter image description here

iPhone 3GS

enter image description here

Hope this helps!

回复收藏 0 原文

~没有更多了~