plugins/dali-script-v8/docs/content/image-actor.js

   1 /**
   2 ## Image Actor API ( extends Actor API)
   3
   4 An actor for displaying images.
   5
   6 Allows the developer to add an actor to stage which displays the content of an Image object.
   7
   8 By default CullFaceMode is set to CullNone to enable the ImageActor to be viewed from all angles.
   9
  10 If an ImageActor is created without setting size, then the actor takes the size of the image -
  11 this is the natural size.
  12 Setting a size on the ImageActor, e.g through the SetSize api or through an animation will
  13 stop the natural size being used.
  14
  15 Such a set size can be changed back to the image's size by calling {{#crossLink "ImageActor/setToNaturalSize:method"}}{{/crossLink}}  .
  16
  17 If a pixel area is set on an ImageActor with natural size, the actor size will change
  18 to match the pixel area. If a pixel area is set on an ImageActor that has had it's size set,
  19 then the size doesn't change, and the partial image will be stretched to fill the set size.
  20
  21 Clearing the pixel area on an Image actor with natural size will cause the actor to show the
  22 whole image again, and will change size back to that of the image.
  23
  24 Clearing the pixel area on an Image actor with a set size will cause the actor to show the
  25 whole image again, but will not change the image size.
  26
  27 ### Simple example
  28 ```
  29 var image = new dali.ResourceImage( {url:"background.png"} );
  30 var imageActor = new dali.ImageActor( image );
  31
  32 // by default an actor is anchored to the top-left of it's parent actor
  33 // change it to the middle
  34 imageActor.parentOrigin = dali.CENTER;
  35
  36 // scale it up by 2 times  in x,y
  37 imageActor.scale = [ 2, 2, 1  ];
  38
  39 // add to the stage
  40 dali.stage.add( imageActor );
  41 ```
  42
  43 ### Example using a pixel area ( needed for displaying images from a Texture Atlas )
  44
  45 ```
  46 var imageAtlas = new dali.ResourceImage( {url:"atlas.png"} )
  47 ```
  48 ![ ](../assets/img/texture-atlas/example-javascript-code.jpg)
  49
  50
  51 ### Image Actor Specific Properties
  52
  53
  54 |Name                   |    Type    | Writable     | Animatable|
  55 |-----------------------|------------|--------------|-----------|
  56 | pixelArea             | RECTANGE   | &#10004;     | &#10008;  |
  57 | fadeIn                | BOOLEAN    | &#10004;     | &#10008;  |
  58 | fadeInDuration        | FLOAT      | &#10004;     | &#10008;  |
  59 | style                 | dali.IMAGE_ACTOR_STYLE_QUAD, dali.IMAGE_ACTOR_STYLE_NINE_PATCH, dali.IMAGE_ACTOR_STYLE_NINE_PATCH_NO_CENTER  | &#10004;     | &#10008;  |
  60 | border                | VECTOR4    | &#10004;     | &#10008;  |
  61
  62
  63 @class ImageActor
  64 @extends RenderableActor
  65  */