# Stage

Inheritance Stage Container View Module hilo/view/Stage Requires hilo/core/Hilo, hilo/core/Class, hilo/view/Container, hilo/renderer/CanvasRenderer, hilo/renderer/DOMRenderer, hilo/renderer/WebGLRenderer, hilo/util/browser, hilo/util/util Source Stage.js
Stage is the root of all visual object tree, any visual object will be render only after being added to Stage or any children elements of Stage. Normally, every hilo application start with an stage instance.
Demo:

    var stage = new Hilo.Stage({
        renderType:'canvas',
        container: containerElement,
        width: 320,
        height: 480
    });

### Properties

Show Inherited Properties

| Property | Defined
--- | --- | ---
| canvas:HTMLCanvasElement|HTMLElement The canvas the Stage is related to. | Stage
| paused:Boolean Paused Stage rendering. | Stage
| renderer:Renderer Stage renderer, readonly! | Stage
| viewport:Object Rendering area of the Stage. | Stage
| align:String|Function The alignment of the view, the value must be one of Hilo.align enum. | View
| alpha:Number The opacity of the view, default value is 1. | View
| background:Object The background style to fill the view, can be css color, gradient or pattern of canvas | View
| boundsArea:Array The vertex points of the view, the points are relative to the center point. | View
| children:Array List of children elements of the container, readonly! | Container
| clipChildren:Boolean Whether clip children elements which are out of the container, default value is false. | Container
| depth:Number The z index of the view, readonly! | View
| drawable:Drawable The drawable object of the view. | View
| height:Number The height of the view, default value is 0. | View
| id:String The identifier for the view. | View
| mask:Graphics Sets a mask for the view. | View
| onUpdate:Function This method will call while the view need update(usually caused by ticker update). | View
| parent:Container The parent view of this view, readonly! | View
| pivotX:Number Position of the center point on the x axis of the view, default value is 0. | View
| pivotY:Number Position of the center point on the y axis of the view, default value is 0. | View
| pointerChildren:Boolean Whether children elements of the container can response to user interactive events, default value is true. | Container
| pointerEnabled:Boolean Is the view can receive DOM events, default value is true. | View
| rotation:Number The rotation of the view in angles, default value is 0. | View
| scaleX:Number The x axis scale factor of the view, default value is 1. | View
| scaleY:Number The y axis scale factor of the view, default value is 1. | View
| tint:Number The tint applied to the view，default is 0xFFFFFF.Only support in WebGL mode. | View
| transform:Matrix The transform of the view.If set the transform, x, y, scaleX, scaleY, rotation, pivotX, pivotY will be ignored.default is null. | View
| visible:Boolean The visibility of the view. | View
| width:Number The width of the view, default value is 0. | View
| x:Number The position of the view on the x axis relative to the local coordinates of the parent, default value is 0. | View
| y:Number The position of the view on the y axis relative to the local coordinates of the parent, default value is 0. | View

### Methods

Show Inherited Methods

| Method | Defined
--- | --- | ---
| Stage(properties:Object) Constructor | Stage
| addTo(domElement:HTMLElement):Stage Add Stage canvas to DOM container. | Stage
| enableDOMEvent(type:String|Array, enabled:Boolean):Stage Turn on/off Stage response to DOM event. | Stage
| resize(width:Number, height:Number, forceResize:Boolean) Resize the Stage. | Stage
| tick(delta:Number) Invoke tick function and Stage will update and render. | Stage
| updateViewport():Object Update the viewport (rendering area) which Stage show on the page. | Stage
| addChild(child:View) Add child element at the top. | Container
| addChildAt(child:View, index:Number) Add child element at given index. | Container
| contains(child:View) Return whether this container contains the parameter described child element. | Container
| fire(type:String, detail:Object):Boolean Send events. | View
| getBounds():Array Get the bounds of the view as a circumscribed rectangle and all vertex points relative to the coordinates of the stage. | View
| getChildAt(index:Number) Return child element at the given index. | Container
| getChildById(id:String) Return child element at the given id. | Container
| getChildIndex(child:View) Return index value of the given child element. | Container
| getNumChildren():Uint Return the amount of the children elements of the container. | Container
| getScaledHeight():Number Get the scaled height of the view. | View
| getScaledWidth():Number Get the scaled width of the view. | View
| getStage():Stage Get the stage object of the view. | View
| getViewAtPoint(x:Number, y:Number, usePolyCollision:Boolean, global:Boolean, eventMode:Boolean) Return object at the point positioned by given values on x axis and y axis. | Container
| hitTestObject(object:View, usePolyCollision:Boolean) Determining whether an object is in the circumscribed rectangle of current view. | View
| hitTestPoint(x:Number, y:Number, usePolyCollision:Boolean):Boolean Determining whether a point is in the circumscribed rectangle of current view. | View
| off(type:String, listener:Function):Object Remove one event listener. | View
| on(type:String, listener:Function, once:Boolean):Object Add an event listenser. | View
| removeAllChildren():Container Remove all children elements. | Container
| removeChild(child:View):View Remove the given child element. | Container
| removeChildAt(index:Int):View Remove element at the index. | Container
| removeChildById(id:String):View Remove child element by its id. | Container
| removeFromParent():View Remove current view from it's parent container | View
| render(renderer:Renderer, delta:Number) The render method of current view. | View
| setChildIndex(child:View, index:Number) Set the index of child element. | Container
| sortChildren(keyOrFunction:Object) Sort children elements by the given key or function. | Container
| swapChildren(child1:View, child2:View) Swap index between two child elements. | Container
| swapChildrenAt(index1:Number, index2:Number) Swap two children elements at given indexes. | Container
| toString():String Get a string representing current view. | View

### Property Detail

canvas:HTMLCanvasElement|HTMLElement
The canvas the Stage is related to. It can be a canvas or a div element, readonly!
paused:Boolean
Paused Stage rendering.
renderer:Renderer
Stage renderer, readonly!
viewport:Object
Rendering area of the Stage. Including properties like: left, top, width, height. readonly!

### Constructor

Stage(properties:Object)

parameters
properties:Object — Properties parameters for the object. Includes all writable properties of this class. Some important like:

- container:String|HTMLElement - Assign the parent container element of the Stage in the page. It should be a dom container or an id. If this parameter is not given and canvas isn't in the dom tree, you should add the stage vanvas into the dom tree yourself, otherwise Stage will not render. optional.
- renderType:String - Renering way: canvas|dom|webgl，default value is canvas, optional.
- canvas:String|HTMLCanvasElement|HTMLElement - 指定舞台所对应的画布元素。它是一个canvas或普通的div，也可以传入元素的id。若为canvas，则使用canvas来渲染所有对象，否则使用dom+css来渲染。可选。
- width:Number
- The width of the Stage, default value is the width of canvas, optional.
- height:Number
- The height of the Stage, default value is the height of canvas, optional.
- paused:Boolean
- Whether stop rendering the Stage, default value is false, optional.

### Method Detail

addTo(domElement:HTMLElement):Stage
Add Stage canvas to DOM container. Note: this function overwrite View.addTo function.

parameters
domElement:HTMLElement — An dom element.

return
  Stage — The Stage Object, chained call supported.

enableDOMEvent(type:String|Array, enabled:Boolean):Stage
Turn on/off Stage response to DOM event. To make visual objects on the Stage interactive, use this function to turn on Stage's responses to events.

parameters
type:String|Array — The event name or array that need to turn on/off.
enabled:Boolean — Whether turn on or off the response method of stage DOM event. If not provided, default value is true.

return
  Stage — The Stage Object, chained call supported.

resize(width:Number, height:Number, forceResize:Boolean)
Resize the Stage.

parameters
width:Number — The width of the new Stage.
height:Number — The height of the new Stage.
forceResize:Boolean — Whether forced to resize the Stage, means no matter the size of the Stage, force to change the size to keep Stage, canvas and window act at the same time.

tick(delta:Number)
Invoke tick function and Stage will update and render. Developer may not need to use this funciton.

parameters
delta:Number — The time had pass between this tick invoke and last tick invoke.

updateViewport():Object
Update the viewport (rendering area) which Stage show on the page. Invoke this function to update viewport when Stage canvas changes border, margin or padding properties.

return
  Object — The visible area of the Stage (the viewport property).