如何在 Titanium 中以圆形裁剪图像？答案

【问题标题】：How to crop image in a circle shape in Titanium?如何在 Titanium 中以圆形裁剪图像？
【发布时间】：2014-02-14 08:15:52
【问题描述】：

您可以通过将图像设置为标签的背景，然后将标签设置为您想要的大小来裁剪图像，但是有没有办法将其裁剪成圆形？

谢谢！

【问题讨论】：

标签： image titanium appcelerator shape geometry

【解决方案1】：

将borderRadius 设置为图像宽度/高度的一半将为您提供圆形图像。

var imageView = Ti.UI.createImageView({
    image        : '/images/myImage.png',
    width        : 60,
    height       : 60,
    borderRadius : 30
});
win.add(imageView);

对于裁剪图像，imageAsCropped 也很方便。

【讨论】：

【解决方案2】：

使用钛 ui 的非常简单的解决方案。没有要像素化的角落（Android）。

<View id="userFaceContainer">                                       
     <ImageView id="avatar" />                    
     <View id="userFaceInnerBorder" />
</View>

和样式

"#avatar": {
   width: 90,
   height: 90
}

"#userFaceContainer": {
    width: 90,
    height: 90,
    center: {
       x:"50%", 
       y:"50%"
    },
    borderRadius: 45,
    borderColor: "#669dd3",
    borderWidth:2
}

"#userFaceInnerBorder": {
    width: 88,
    height: 88,
    borderRadius: 44,
    borderColor: "#669dd3",
    borderWidth:2,
    opacity: 0.7
}

【讨论】：

是否可以使用百分比值而不是绝对值来实现椭圆形/圆形？