Titanium Mobile

# Titanium.UI.MaskedImage

A control that displays an image composited with a background image or color.

Availability
7.3.0
0.8
9.2.0
Extends
Titanium.UI.View

# Overview

This is a control that can be used to display an image combined with another image and/or color. The layers are drawn in the following order:

  • The mask, or background image.
  • The image, or foreground image.
  • The tint, or constant tint color.

The way the layers are combined depends on the value of the mode property. The mode value can be set to one of the Titanium.UI BLEND_MODE constants. These constants correspond directly to the blend modes described by Apple and Google here:

"Bitmap Images and Image Masks" in Quartz2D Reference (opens new window)

"PorterDuff.Mode" Android Reference (opens new window)

When compositing two images, the mask property specifies the background, or destination (D) image, and the image property specifies the foreground, or source (S) layer. For example, to use an image as an alpha mask for another image, you could use the following code:

var imageMask = Titanium.UI.createMaskedImage({
    mask : 'mask.png', // alpha mask
    image : 'demo_image.png', // image to mask
    mode : Titanium.UI.BLEND_MODE_SOURCE_OUT
});

Note that this control lacks many of the features associated with a standard Titanium.UI.ImageView control.

Use the Titanium.UI.createMaskedImage method to create a masked image view.

# Examples

# Lighten Blend Mode

The following code excerpt blends the background image with the given tint color:

var imageMask = Titanium.UI.createMaskedImage({
    mask : 'demo_image.png', // background image
    tint: 'red',
    mode : Titanium.UI.BLEND_MODE_LIGHTEN,
});

# Properties

# image

Availability
7.3.0
0.8
9.2.0
image :String

Image drawn as the Foreground image.

Specify a local file path.

Unlike the standard Titanium.UI.ImageView, images cannot be specified using a remote URL, Titanium.Blob, or Titanium.Filesystem.File object.

# mask

Availability
7.3.0
0.8
9.2.0
mask :String

Image drawn as the background image.

Specify a local file path.

Unlike the standard Titanium.UI.ImageView, images cannot be specified using a remote URL, Titanium.Blob, or Titanium.Filesystem.File object.

# mode

Availability
7.3.0
0.8
9.2.0
mode :Number

Blend mode to use to combine layers.

This API can be assigned the following constants:

Default: Titanium.UI.BLEND_MODE_SOURCE_IN

# tint

Availability
7.3.0
0.8
9.2.0
tint :String | Titanium.UI.Color

Color to combine with the image, as a color name or hex triplet.

For information about color values, see the "Colors" section of Titanium.UI.

Contents