appcelerator - Appcelerator Titanium - 不要将图像拉伸到 ImageView 尺寸

Question

我有一个大小为 1024x1024 的图像，我想将它作为一个ImageView对象作为背景。我已将ImageView高度和宽度设置为设备的大小并加载图像 - 发生的情况是图像显示整个图像被压缩到给定尺寸。

我想看到的不是整个图像-我希望它缩放以显示居中，并且不适合屏幕的图像部分不显示。我的最终结果应该是设置高度和宽度，任何一次性的都会溢出和隐藏。

如何设置图像不拉伸？

Answer 1

您正在寻找的是一个剪裁的图像。这种效果最好使用打开剪辑的 View 和 ImageView 的组合来实现。

作为示例，我们将使用大图像和下面的代码。

<Alloy>
<Window class="container"  backgroundColor="#000">
    <View clipMode="Titanium.UI.iOS.CLIP_MODE_ENABLED" width="200">
        <ImageView image="/images/Moonset_over_ESO's_Very_Large_Telescope.jpg" height="2336" width="3504"/>
    </View>
</Window>
</Alloy>

请注意，我们在父视图上启用了剪辑，并使用它来定义我们希望在屏幕上呈现的所有内容的实际宽度。然后将 ImageView 与要渲染的图像的实际宽度/高度一起使用。因为我们没有设置 top,left,right,bottom 属性，所以 ImageView 将在父视图的中心呈现自己，并隐藏它的溢出。

这提供了所需的效果，如下图所示。

Answer 2

我认为您的意思是 ImageView 的图像属性，而不是 backgroundImage。如果您使用普通视图并设置背景图像，它将被拉伸。从文档：

指定此视图的宽度或高度属性将在保持纵横比的情况下缩放其图像，最大尺寸不超过其父视图。

如果要将图像居中，可以将其放在 a 中View并将宽度/高度设置为最大值（或计算纵横比并正确设置两个值），它将在周围居中View

XML

<Alloy>

    <Window >
        <ImageView id="img"/>
    </Window>

</Alloy>

JS

$.img.image = "/images/1.jpg";
$.img.width = 200;
$.index.open();

图片原始尺寸：1080x720。在应用内显示：200px 宽度未拉伸且位于窗口中间（Android、Ti 5.1.2、设备上的 TiShadow）