5

当艺术部门的人注意到图像质量下降时，我在最近的一个项目中遇到了这个问题。我不确定是什么原因造成的，但是我们能够通过删除它嵌套的 ScrollView 来解决这个问题。但这不是一个可行的解决方案，因为我们需要将图像嵌套在嵌套在滚动视图中的视图中。

我的代码看起来像：

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

当我们从嵌套的 ScrollView 和它的直接父视图中删除 ImageView 时，它呈现得很好。我用一个简单的项目创建了一个 repo 来说明这一点。模糊效果在字母的着色、文本上的白色阴影和灰色边框的模糊处最为明显。

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

这是一个需要报告的错误，还是在某个地方有我不知道的“不要这样做”的文档？

问候布兰特

4

1 回答 1

2

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

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

对此：

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

模糊消失了。我认为这是因为您在一个紧密绑定的框中混合了相对和绝对视图布局技术（百分比和绝对像素）（.parent 视图与子图像视图的高度完全相同），这导致下面的布局计算当他们在父视图中绘制图像时，稍微捏造一点。

我这样说是因为这也可以通过为转换错误留出更多空间来显着消除模糊：

".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 种不同的有限布局测试和我自己的经验（我还没有通过本机代码）做出此声明，因此这绝不是科学。

于 2013-08-20T12:45:43.407 回答