7 Answers

• Ok i've been working with this in a project (still work in progress though)

  But so far playing with it shows it only does respond to SOURCE_MODE_IN everything else (SOURCE_MODE_OUT) breaks it.

  what I use it for is a character builder I have a character builders, I created the base of the character (bald) and the base of the haircuts (all these are black outlines with no color in it (transparent) pngs,
  I layer these on the highes zIndex.

  Then underneath these I put a complete black solid that fits on the skin parts of the outlines and a complete black solid that fits the haircuts etc.

  Now you can change the "tint" parameter of the black solid layers to a color and the black will change color, this is wat Masking does as far as I can find out, it's bascially a basic alpha channel.

  I don't think it does any real masking yet I tried to blend a picture in a cirlce everything I tried so far failed.

  maybe they didn't really finish the api yet and thats why its not in the docs

  Oh and when my users made theire character, and try to save the image using the toImage(); method, all the maskes images don't stay on their position they all "fall down" so to say

• I too would like to see documentation for this.

  // put the image mask (which must be non-transparent, black) in the back
  var mask = Titanium.UI.createMaskedImage({
      image:'../images/body-mask.png',
      tint: 'brown',
      mode: Titanium.UI.BLEND_MODE_SOURCE_IN
  });
  
  // layer on top the image that is transparent that you want to blend
  var image = Titanium.UI.createMaskedImage({
      image:'../images/body.png',
      tint: 'black',
      mode: Titanium.UI.BLEND_MODE_SOURCE_IN
  });
  

  I tried to implement this feature in an app I was working on earlier. One thing to note is that the Titanium SDK version must be set to 1.0 for it to work.

• Same here, I'm trying to edit images and this looks like a perfect solution.

• This works:

  var imageMask = Titanium.UI.createMaskedImage({
  mask:'./images/MaskLeft.png', //optional: background Image (d)
  image:'./images/body.png', //foreground Image (s)
  mode: Titanium.UI.BLEND_MODE_SOURCE_IN

  });

• -subscribe-

• Would someone explain what an MaskedImage is used for, please? Thanks!

• I have used MaskedImage to mask an image to create an image reflection.

  Ti.UI.MaskedImage();
  http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.MaskedImage

  This method DOES require creating a gradient in Photoshop and saved as a PNG

  
  var img_url = 'http://developer.appcelerator.com/assets/img/badge_titan.png',
      img_width = 75,
      img_height = 75,
      bgColor = '#000000';
  
  var win = Titanium.UI.createWindow({backgroundColor:bgColor});
  
  var img = Ti.UI.createImageView({image:img_url, top:10, left:10, width:img_width, height:img_height});
  
  var img_reflection = Ti.UI.createMaskedImage({
      image:img_url,
      mask : 'img/grad.png', // my photoshop made PNG with a black and transparent gradient in it 
      // the black with mask the image the transparent shows through
      top: 10 + img_height, 
      left:10, 
      width:img_width, 
      height:img_height,
       mode: Titanium.UI.iOS.BLEND_MODE_SOURCE_OUT
  });
  
  img_reflection.transform = Ti.UI.create2DMatrix().scale(1,-1); //flip vertically
  
  win.add(img);
  win.add(img_reflection);
  
  win.open();
  

  Hope this helps