Appcelerator Studio - 不要拉伸图像

时间:2016-08-09 19:58:32

标签: titanium appcelerator

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

这是我到目前为止所拥有的:

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

我听说过裁剪技术,但是这只适用于iOS,我想在两个平台上使用它。有没有办法做到这一点?或者我应该尝试适当调整大小?提示/建议表示赞赏!

2 个答案:

答案 0 :(得分:0)

您应该根据要运行应用程序的屏幕宽高比使用正确的图像。

您可以通过计算设备的宽高比来完成此操作,然后您就可以决定要显示哪个图像。

但是直接放置一个分辨率图像以掩盖整个屏幕 永远不会工作。

要调整图片大小,您可以在使用 Ti.Blob

获取图片后使用 Ti.Filesystem 类'方法

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

但是如果你的要求只是在背景中使用图像,那么一旦你移动到不同的屏幕就卸载它,并在你重新加载它时再次加载它。

需要注意的其他要点:

  1. 如果在视图上设置bg图像,则它适合覆盖视图的尺寸。因此,如果您有宽度/高度到100%的视图,那么图像将适合它。这意味着图像尺寸将取决于视图的尺寸,而视图尺寸将取决于图像尺寸。

  2. 如果您在ImageView上设置图片,并假设您有:

    • ImageView width = FILL到屏幕尺寸为720,然后将自动决定图像高度以保持纵横比。这意味着如果你有一个大小宽度= 720和高度= 400的图像,那么ImageView将是 width = FILL &的高度= 400

    • 尺寸宽度= 1000 身高= 800 & ImageView height = 400,然后ImageView将是 width = 500 &的高度= 400

答案 1 :(得分:0)

问题是你实际上是在告诉图像控件将图像加载到一个被拉伸到整个屏幕宽度和高度的对象上 - 当屏幕宽高比不同于你裁剪的那个然后你的图像会得到不好的宽高比,图像看起来很糟糕。

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

当我想要背景图片时,我发现最好的方法是制作方形图像,然后将我的ImageView高度设置为Ti.UI.FILL,将宽度设置为Ti.UI.SIZE - 这样就显示出良好的外观不显示“不适合”屏幕的比例和侧面(宽度或高度)。