嵌套视图会降低图像质量。

Question

最近在一个项目中，艺术部门的人注意到图像质量正在下降，我遇到了这个问题。我不确定是什么原因导致的，但是我们成功地解决了这个问题，方法是移除它所嵌套的ScrollView。但是这并不是一个可行的解决方案，因为我们需要将图片嵌套在ScrollView的视图中。

我的代码大致如下：

<View>
    <ScrollView>
         <View>
              <ImageView image="someImage.png" />
         </View>
    </ScrollView>
</View>

当我们从嵌套的ScrollView和它的直接父视图中移除了ImageView，它可以正常渲染。我创建了一个简单项目的存储库来说明这一点。模糊效果最明显的是字母的着色、文本的白色投影和灰色边框的模糊。

https://bitbucket.org/bwellons/blurry-images

这是需要报告的错误吗？或者有没有任何文档说“不要这样做”，而我不知道呢？

敬礼 布兰特

- Brant

---

嗨，布兰特，你在Bitbucket上的图片链接似乎失效了。 - svenv

另外，我不熟悉钛，但在我看来，似乎这些控件以某种方式缩放了您的图像。您是否测量了上述两种情况下图像的确切像素大小？有什么区别吗？ - svenv

我通过从仓库名称中删除“.git”来更正链接。它现在应该可以工作了。 - Brant

是的，这两个使用的图像实际上是同一张图像，它们引用了完全相同的文件，并且视图设置为图像的确切尺寸。 - Brant

这可能不是一个错误，而是你的index.tss文件中btmImg样式有些模糊，应该改为#btmImg，对吧？ - Josiah Hester

谢谢指出，我已经调整了.tss文件。 - Brant

Answer 1

我认为这是由于视图的界限（宽度、高度）和锚点（顶部、左侧、右侧、底部）没有以一致的方式定义所导致的。例如，如果我只是更改了这个：

".parent": {
    width: '100%',
    height : 59,
}

变成这样：

".parent": {
    top : 0,
    width: '100%',
    height : 59
}

模糊效果消失了。我认为这是因为您在一个紧密绑定的框中（父视图与子图像视图具有完全相同的高度），混合使用相对和绝对视图布局技术（百分比和绝对像素），导致在绘制父视图内的图像时，底层布局计算出现了一些偏差。

我之所以这样说，是因为这也可以明显地消除模糊，通过为变换误差提供更多空间：

".parent": {
    width: '100%',
    height : 62 // Added 3 pixels of padding
}

以下是其他一些同样有效的方法，可以使用相同的布局机制来控制宽度和高度，或者为变换提供更多空间：

".parent": {
    width: '100%',
    height : '50%' // Dont do this, but shows the point
}

".parent": {
    bottom : 0,
    width: Ti.UI.FILL, // I use Ti.UI.FILL instead of 100% generally
    height : 59
}

一般情况下，避免在嵌套视图链维度中混合使用百分比和绝对值，除非您愿意在父级中留出一些余地或定义锚点（上、左、右、下），以使绘图变换正常工作。

免责声明：我只基于大约15-20个不同的有限布局测试和我的经验（尚未查看本机代码），因此这绝非科学结论。

- Josiah Hester