Appcelerator Studio - 不要拉伸图像

Question

我有一张 405x720 的图像，用于覆盖背景图像。我注意到如果设备的屏幕小于图像，它会拉伸图像。（我正在使用 Galaxy S4 来测试我的应用程序）。

这是我目前的情况：

    var fullView = Ti.UI.createImageView({
        layout: 'vertical',
        width: '100%',
        height: '100%',
        image: '/images/background.png'
    });

我听说过裁剪技术，但它仅适用于 iOS，我想在两个平台上都使用它。有没有办法做到这一点？还是我应该尝试适当地调整它的大小？ Tips/Suggestions 非常感谢！

Answer 1

您应该根据要在运行您的应用上使用的屏幕的纵横比使用适当的图像。

您可以通过计算设备的宽高比来完成此操作，然后您可以决定在哪张图片上显示。

但是直接放一张单分辨率的图就把整个屏幕都盖住了永远不会工作。

要调整图像大小，您可以使用 Ti.Blob class' methods after fetching your image using Ti.Filesystem

还要记住，将图像放在整个背景上会占用大量内存，尤其是在 Android 中。这就是为什么大多数应用程序不使用完整图像来掩盖背景，而是在必要时使用小图像并根据需要用颜色或渐变填充其他区域。

但是，如果您的要求只是在背景中使用图像，那么当您移动到不同的屏幕时立即卸载它，并在您返回时再次加载它。

更多注意事项：

如果你在View上设置背景图片，那么它会适合覆盖View的尺寸。因此，如果您的视图 width/height 为 100%，则图像将适合它。这意味着图像大小将取决于视图的尺寸，而不是视图尺寸将取决于图像尺寸。
如果您在 ImageView 上设置图像，假设您有：
- ImageView width = FILL 到屏幕尺寸720，那么图片高度会自动决定，保持宽高比。这意味着如果你有一个尺寸为 width=720 和 height=400 的图像，那么 ImageView 将是 width=FILL & height=400
- Image of size width=1000 and height=800 & ImageView height = 400, then ImageView will 宽度=500 & 高度=400

Answer 2

问题在于，您实际上是在告诉图像控件将图像加载到一个拉伸到整个屏幕宽度和高度的对象上 - 当屏幕纵横比与您拥有的纵横比不同时裁剪你的图像然后你得到糟糕的宽高比并且图像看起来搞砸了。

如果删除宽度或高度，则将加载图像的宽高比。

当我想要背景图片时，我发现最好的方法是制作一个正方形图片，然后将我的 ImageView 高度设置为 Ti.UI.FILL，将宽度设置为 Ti.UI.SIZE - 这样显示没有显示良好的宽高比和不 "fit" 屏幕（宽度或高度）的侧面。

Appcelerator Studio - 不要拉伸图像

Appcelerator Studio - Don't stretch Image

titanium

appcelerator