Titanium.UI.MaskedImage

Object of Titanium.UI.
Platform Since
iPhone 0.8
iPad 0.8

Summary

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

Description

This is an iOS-specific 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.iOS BLEND_MODE constants. These constants correspond directly to the iOS blend modes described in the iOS developer library:

"CGBlendMode" in CGContext Reference

and:

"Using Blend Modes with Images" in Quartz2D Reference

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.iOS.BLEND_MODE_SOURCE_OUT
});

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

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

Code Examples

Luminosity Blend Mode

The following code excerpt creates a monochrome version of the background image, using the luminosity from the background image and the specified tint color:

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

Methods

Name Summary
add

Adds a child to this view's hierarchy.

addEventListener

Adds the specified callback as an event listener for the named event.

animate

Animates this view.

convertPointToView

Translates a point from this view's coordinate system to another view's coordinate system.

fireEvent

Fires a synthesized event to any registered listeners.

getAnchorPoint

Gets the value of the anchorPoint property.

getAnimatedCenterPoint

Gets the value of the animatedCenterPoint property.

getBackgroundColor

Gets the value of the backgroundColor property.

getBackgroundDisabledColor

Gets the value of the backgroundDisabledColor property. (Android only.)

getBackgroundDisabledImage

Gets the value of the backgroundDisabledImage property. (Android only.)

getBackgroundFocusedColor

Gets the value of the backgroundFocusedColor property. (Android only.)

getBackgroundFocusedImage

Gets the value of the backgroundFocusedImage property. (Android only.)

getBackgroundGradient

Gets the value of the backgroundGradient property.

getBackgroundImage

Gets the value of the backgroundImage property.

getBackgroundLeftCap

Gets the value of the backgroundLeftCap property.

getBackgroundRepeat

Gets the value of the backgroundRepeat property.

getBackgroundSelectedColor

Gets the value of the backgroundSelectedColor property.

getBackgroundSelectedImage

Gets the value of the backgroundSelectedImage property.

getBackgroundTopCap

Gets the value of the backgroundTopCap property.

getBorderColor

Gets the value of the borderColor property.

getBorderRadius

Gets the value of the borderRadius property.

getBorderWidth

Gets the value of the borderWidth property.

getBottom

Gets the value of the bottom property.

getCenter

Gets the value of the center property.

getChildren

Gets the value of the children property.

getFocusable

Gets the value of the focusable property. (Android only.)

getHeight

Gets the value of the height property.

getImage

Gets the value of the image property.

getKeepScreenOn

Gets the value of the keepScreenOn property. (Android only.)

getLayout

Gets the value of the layout property.

getLeft

Gets the value of the left property.

getMask

Gets the value of the mask property.

getMode

Gets the value of the mode property.

getOpacity

Gets the value of the opacity property.

getRight

Gets the value of the right property.

getSize

Gets the value of the size property.

getSoftKeyboardOnFocus

Gets the value of the softKeyboardOnFocus property. (Android only.)

getTint

Gets the value of the tint property.

getTop

Gets the value of the top property.

getTouchEnabled

Gets the value of the touchEnabled property.

getTransform

Gets the value of the transform property.

getVisible

Gets the value of the visible property.

getWidth

Gets the value of the width property.

getZIndex

Gets the value of the zIndex property.

hide

Hides this view.

remove

Removes a child view from this view's hierarchy.

removeEventListener

Removes the specified callback as an event listener for the named event.

setAnchorPoint

Sets the value of the anchorPoint property.

setBackgroundColor

Sets the value of the backgroundColor property.

setBackgroundDisabledColor

Sets the value of the backgroundDisabledColor property. (Android only.)

setBackgroundDisabledImage

Sets the value of the backgroundDisabledImage property. (Android only.)

setBackgroundFocusedColor

Sets the value of the backgroundFocusedColor property. (Android only.)

setBackgroundFocusedImage

Sets the value of the backgroundFocusedImage property. (Android only.)

setBackgroundGradient

Sets the value of the backgroundGradient property.

setBackgroundImage

Sets the value of the backgroundImage property.

setBackgroundLeftCap

Sets the value of the backgroundLeftCap property.

setBackgroundRepeat

Sets the value of the backgroundRepeat property.

setBackgroundSelectedColor

Sets the value of the backgroundSelectedColor property.

setBackgroundSelectedImage

Sets the value of the backgroundSelectedImage property.

setBackgroundTopCap

Sets the value of the backgroundTopCap property.

setBorderColor

Sets the value of the borderColor property.

setBorderRadius

Sets the value of the borderRadius property.

setBorderWidth

Sets the value of the borderWidth property.

setBottom

Sets the value of the bottom property.

setCenter

Sets the value of the center property.

setFocusable

Sets the value of the focusable property. (Android only.)

setHeight

Sets the value of the height property.

setImage

Sets the value of the image property.

setKeepScreenOn

Sets the value of the keepScreenOn property. (Android only.)

setLayout

Sets the value of the layout property.

setLeft

Sets the value of the left property.

setMask

Sets the value of the mask property.

setMode

Sets the value of the mode property.

setOpacity

Sets the value of the opacity property.

setRight

Sets the value of the right property.

setSoftKeyboardOnFocus

Sets the value of the softKeyboardOnFocus property. (Android only.)

setTint

Sets the value of the tint property.

setTop

Sets the value of the top property.

setTouchEnabled

Sets the value of the touchEnabled property.

setTransform

Sets the value of the transform property.

setVisible

Sets the value of the visible property.

setWidth

Sets the value of the width property.

setZIndex

Sets the value of the zIndex property.

show

Makes this view visible.

toImage

Returns an image of the rendered view, as a Blob.

Properties

Name Type Summary
anchorPoint Point

Anchor point where animation should occur, relative to the view's boundaries.

animatedCenterPoint Point

Current position of the view during an animation. read-only

backgroundColor String

Background color of the view.

backgroundDisabledColor String

Disabled background color of the view. (Android only.)

backgroundDisabledImage String

Disabled background image for the view, specified as a local file path or URL. (Android only.)

backgroundFocusedColor String

Focused background color of the view. (Android only.)

backgroundFocusedImage String

Focused background image for the view, specified as a local file path or URL. (Android only.)

backgroundGradient Gradient

A background gradient for the view.

backgroundImage String

Background image for the view, specified as a local file path or URL.

backgroundLeftCap Number

Size of the left end cap.

backgroundRepeat Boolean

Toggle for whether or not to tile a background across a view.

backgroundSelectedColor String

Selected background color of the view.

backgroundSelectedImage String

Selected background image url for the view, specified as a local file path or URL.

backgroundTopCap Number

Size of the top end cap.

borderColor String

Border color of the view.

borderRadius Number

Border radius of the view.

borderWidth Number

Border width of the view.

bottom Number or String

View's bottom position, in platform-specific units.

center Point

View's center position, in the parent view's coordinates.

children Array<Titanium.UI.View>

Array of this view's child views. read-only

focusable Boolean

Whether view should be focusable while navigating with the trackball. (Android only.)

height Number or String

View height, in platform-specific units.

image String

Image drawn as the Foreground image.

keepScreenOn Boolean

Whether to keep the device screen on. (Android only.)

layout String

Specifies how the view positions its children. One of: 'absolute', 'vertical', or 'horizontal'.

left Number or String

View's left position, in platform-specific units.

mask String

Image drawn as the background image.

mode Number

Blend mode to use to combine layers.

opacity Number

Opacity of this view, from 0.0 (transparent) to 1.0 (opaque).

right Number or String

View's right position, in platform-specific units.

size Object

Rendered size of the view as a dictionary of width and height properties. read-only

softKeyboardOnFocus Number

Determines keyboard behavior when this view is focused. (Android only.)

tint String

Color to combine with the image.

top Number or String

The view's top position.

touchEnabled Boolean

Whether view should receive touch events.

transform Titanium.UI.2DMatrix or Titanium.UI.iOS.3DMatrix

Transformation matrix to apply to the view.

visible Boolean

Boolean value indicating whether the view is visible.

width Number or String

View's width, in platform-specific units.

zIndex Number

Z index position relative to other sibling views.

Events

Name Summary
click

Fired when the device detects a click against the view.

dblclick

Fired when the device detects a double click against the view.

doubletap

Fired when the device detects a double tap against the view.

longclick

Fired when the device detects a long click. (Android only.)

longpress

Fired when the device detects a long press.

pinch

Fired when the device detects a pinch gesture.

singletap

Fired when the device detects a single tap against the view.

swipe

Fired when the device detects a swipe gesture (left or right) against the view.

touchcancel

Fired when a touch event is interrupted by the device.

touchend

Fired when a touch event is completed.

touchmove

Fired as soon as the device detects movement of a touch.

touchstart

Fired as soon as the device detects a touch gesture.

twofingertap

Fired when the device detects a two-finger tap against the view.