在应用程序的标题上转换图像动态

Question

你好， 我有一个方格式的图片，我想在加载视图时像右下方的示例中那样屏蔽它。我是appcelerator的新手，我不知道最好的方法是什么，因为所有不同的分辨率都应该得到支持。现在我们将标题作为视图，将以下Feed作为单独的视图。我们使用合金，但当然我们也可以添加经典代码。

我应该创建一个PNG imgae，将脸部的一部分作为开​​放部分吗？ 但是我看到了不同解决方案的一些问题。

任何暗示都会非常感激。

Answer 1

您可以将两个视图放在一起：

正方形，图像与右侧对齐，其中一个borderRadius: half width/height在其顶部向左移动（圆的中心位于正方形的左侧）。

如果它们没有正确对齐，您可以使用此脚本
https://github.com/falkolab/com.falkolab.maskedimage 同 https://github.com/GeraudBourdin/Ti.SvgView/创建SVG掩码

<强>更新

这是一个没有任何额外插件的工作版本：

<强> index.tss

"Window" : {
    backgroundColor: "white"
}
"#view_bg" : {
    right: 0,
    width: 160,
    height: 160,
    backgroundImage: "/images/default.jpg",
    top: -20
}
"#view_head" : {
    width: 160,
    height: 160,
    backgroundImage: "/images/default.jpg",
    top: -20
}
"#view_circle" : {
    width: 80,
    height: 80,
    right: 40,
    borderRadius: 40
}
"#view_box" : {
    right: 0,
    width: 80,
    height: 80
}

<强> INDEX.XML

<Alloy>
    <Window>

        <View id="view_box">
            <View id="view_bg"></View>
        </View>
        <View id="view_circle">
            <View id="view_head"></View>
        </View>

    </Window>
</Alloy>

更改view_bg和`view_head'顶部值以在切割视图内对齐图像