# Titanium.UI.MaskedImage

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

- Source: https://titaniumsdk.com/docs/sdk/main/Titanium.UI.MaskedImage
- Titanium SDK version: main
- Kind: view
- Platforms: Android, iPhone, iPad, macOS
- Since: Titanium SDK Android 7.3.0, iPhone 0.8, iPad 0.8
- Extends: Titanium.UI.View
- Inheritance: Titanium.UI.View > Titanium.Proxy

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](https://titaniumsdk.com/docs/sdk/Titanium.UI.md) `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](https://developer.apple.com/library/content/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_images/dq_images.html#//apple_ref/doc/uid/TP30001066-CH212-TPXREF101)

["PorterDuff.Mode" Android Reference](https://developer.android.com/reference/android/graphics/PorterDuff.Mode.html)

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:

``` js
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
[ImageView](https://titaniumsdk.com/docs/sdk/Titanium.UI.ImageView.md) control.

Use the [Titanium.UI.createMaskedImage](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#createMaskedImage) method to create a masked image view.

## Example: Lighten Blend Mode

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

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

## Properties

### image

- Type: String
- Platforms: Android, iPhone, iPad, macOS

Image drawn as the Foreground image.

Specify a local file path.

Unlike the standard [ImageView](https://titaniumsdk.com/docs/sdk/Titanium.UI.ImageView.md), images **cannot** be specified
using a remote URL, [Titanium.Blob](https://titaniumsdk.com/docs/sdk/Titanium.Blob.md), or [Titanium.Filesystem.File](https://titaniumsdk.com/docs/sdk/Titanium.Filesystem.File.md) object.

### mask

- Type: String
- Platforms: Android, iPhone, iPad, macOS

Image drawn as the background image.

Specify a local file path.

Unlike the standard [ImageView](https://titaniumsdk.com/docs/sdk/Titanium.UI.ImageView.md), images **cannot** be specified
using a remote URL, [Titanium.Blob](https://titaniumsdk.com/docs/sdk/Titanium.Blob.md), or [Titanium.Filesystem.File](https://titaniumsdk.com/docs/sdk/Titanium.Filesystem.File.md) object.

### mode

- Type: Number
- Platforms: Android, iPhone, iPad, macOS
- Default: `Titanium.UI.BLEND_MODE_SOURCE_IN`

Blend mode to use to combine layers.

Accepts: `Titanium.UI.BLEND_MODE_CLEAR`, `Titanium.UI.BLEND_MODE_COLOR`, `Titanium.UI.BLEND_MODE_COLOR_BURN`, `Titanium.UI.BLEND_MODE_COLOR_DODGE`, `Titanium.UI.BLEND_MODE_COPY`, `Titanium.UI.BLEND_MODE_DARKEN`, `Titanium.UI.BLEND_MODE_DESTINATION_ATOP`, `Titanium.UI.BLEND_MODE_DESTINATION_IN`, `Titanium.UI.BLEND_MODE_DESTINATION_OUT`, `Titanium.UI.BLEND_MODE_DESTINATION_OVER`, `Titanium.UI.BLEND_MODE_DIFFERENCE`, `Titanium.UI.BLEND_MODE_EXCLUSION`, `Titanium.UI.BLEND_MODE_HARD_LIGHT`, `Titanium.UI.BLEND_MODE_HUE`, `Titanium.UI.BLEND_MODE_LIGHTEN`, `Titanium.UI.BLEND_MODE_LUMINOSITY`, `Titanium.UI.BLEND_MODE_MULTIPLY`, `Titanium.UI.BLEND_MODE_NORMAL`, `Titanium.UI.BLEND_MODE_OVERLAY`, `Titanium.UI.BLEND_MODE_PLUS_DARKER`, `Titanium.UI.BLEND_MODE_PLUS_LIGHTER`, `Titanium.UI.BLEND_MODE_SATURATION`, `Titanium.UI.BLEND_MODE_SCREEN`, `Titanium.UI.BLEND_MODE_SOFT_LIGHT`, `Titanium.UI.BLEND_MODE_SOURCE_ATOP`, `Titanium.UI.BLEND_MODE_SOURCE_IN`, `Titanium.UI.BLEND_MODE_SOURCE_OUT`, `Titanium.UI.BLEND_MODE_XOR`

### tint

- Type: String | Titanium.UI.Color
- Platforms: Android, iPhone, iPad, macOS

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](https://titaniumsdk.com/docs/sdk/Titanium.UI.md).

## Inherited members

101 members are inherited. Each is documented on the type that declares it.

- [Titanium.Proxy](https://titaniumsdk.com/docs/sdk/main/Titanium.Proxy.md): `addEventListener`, `apiName`, `applyProperties`, `bubbleParent`, `fireEvent`, `lifecycleContainer`, `removeEventListener`
- [Titanium.UI.View](https://titaniumsdk.com/docs/sdk/main/Titanium.UI.View.md): `accessibilityDisableLongPress`, `accessibilityHidden`, `accessibilityHint`, `accessibilityLabel`, `accessibilityValue`, `anchorPoint`, `animate`, `animatedCenter`, `backgroundColor`, `backgroundDisabledColor`, `backgroundDisabledImage`, `backgroundFocusedColor`, `backgroundFocusedImage`, `backgroundGradient`, `backgroundImage`, `backgroundLeftCap`, `backgroundRepeat`, `backgroundSelectedColor`, `backgroundSelectedImage`, `backgroundTopCap`, `borderColor`, `borderRadius`, `borderWidth`, `bottom`, `center`, `clearMotionEffects`, `click`, `clipMode`, `convertPointToView`, `dblclick`, `doubletap`, `elevation`, `filterTouchesWhenObscured`, `focus`, `focusable`, `getViewById`, `height`, `hiddenBehavior`, `hide`, `horizontalMotionEffect`, `horizontalWrap`, `id`, `insertAt`, `keepHardwareMode`, `keepScreenOn`, `keypressed`, `layout`, `left`, `longclick`, `longpress`, `opacity`, `overrideCurrentAnimation`, `pinch`, `postlayout`, `previewContext`, `pullBackgroundColor`, `rect`, `right`, `rotate`, `rotation`, `rotationX`, `rotationY`, `scaleX`, `scaleY`, `show`, `singletap`, `size`, `softKeyboardOnFocus`, `stopAnimation`, `swipe`, `tintColor`, `toImage`, `tooltip`, `top`, `touchEnabled`, `touchFeedback`, `touchFeedbackColor`, `touchcancel`, `touchend`, `touchmove`, `touchstart`, `transform`, `transitionName`, `translationX`, `translationY`, `translationZ`, `twofingertap`, `verticalMotionEffect`, `viewShadowColor`, `viewShadowOffset`, `viewShadowRadius`, `visible`, `width`, `zIndex`

---

- This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1.
- Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.