在应用的 header 上动态转换图像

Question

你好，我有一张方形格式的图片，我想在加载视图时像下面的示例一样在右侧屏蔽它。我是 appcelerator 的新手，我不知道最好的方法是什么，因为所有不同的解决方案都应该得到支持。现在我们将 header 作为一个视图，将以下提要作为一个单独的视图。我们用的是alloy，当然也可以加经典代码进去

我应该创建一个 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' 顶部值以在切割视图内对齐图像

在应用的 header 上动态转换图像

transform a image dynamic on the header of a app

titanium

appcelerator

appcelerator-titanium

titanium-alloy

appcelerator-alloy