How to crop image in a circle shape in Titanium?

Question

You can crop an image by setting it to the background of a label and then setting the label to the size you want, but is there a way to crop it in a circle shape?

Thanks!

Answer 1

Setting borderRadius to half of the images width/height will give you a circle shaped image.

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

For cropping images, imageAsCropped is also quite handy.

Answer 2

Very simple solution that use titanium ui. Without corners to be pixelated (Android).

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

and styles

"#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
}