<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>src/pixi/display/DisplayObjectContainer.js - pixi.js</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="doc">
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="pixi.js"></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: 2.1.0</em>
</div>
</div>
<div id="bd" class="yui3-g">
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li>
<li><a href="../classes/AjaxRequest.html">AjaxRequest</a></li>
<li><a href="../classes/AlphaMaskFilter.html">AlphaMaskFilter</a></li>
<li><a href="../classes/AsciiFilter.html">AsciiFilter</a></li>
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="../classes/AtlasLoader.html">AtlasLoader</a></li>
<li><a href="../classes/autoDetectRecommendedRenderer.html">autoDetectRecommendedRenderer</a></li>
<li><a href="../classes/autoDetectRenderer.html">autoDetectRenderer</a></li>
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
<li><a href="../classes/BlurXFilter.html">BlurXFilter</a></li>
<li><a href="../classes/BlurYFilter.html">BlurYFilter</a></li>
<li><a href="../classes/CanvasBuffer.html">CanvasBuffer</a></li>
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="../classes/CanvasMaskManager.html">CanvasMaskManager</a></li>
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="../classes/CanvasTinter.html">CanvasTinter</a></li>
<li><a href="../classes/Circle.html">Circle</a></li>
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
<li><a href="../classes/ColorStepFilter.html">ColorStepFilter</a></li>
<li><a href="../classes/ComplexPrimitiveShader.html">ComplexPrimitiveShader</a></li>
<li><a href="../classes/ConvolutionFilter.html">ConvolutionFilter</a></li>
<li><a href="../classes/CrossHatchFilter.html">CrossHatchFilter</a></li>
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="../classes/DotScreenFilter.html">DotScreenFilter</a></li>
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
<li><a href="../classes/Event.html">Event</a></li>
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
<li><a href="../classes/FilterBlock.html">FilterBlock</a></li>
<li><a href="../classes/FilterTexture.html">FilterTexture</a></li>
<li><a href="../classes/Graphics.html">Graphics</a></li>
<li><a href="../classes/GraphicsData.html">GraphicsData</a></li>
<li><a href="../classes/GrayFilter.html">GrayFilter</a></li>
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="../classes/InteractionData.html">InteractionData</a></li>
<li><a href="../classes/InteractionManager.html">InteractionManager</a></li>
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="../classes/Matrix.html">Matrix</a></li>
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
<li><a href="../classes/NoiseFilter.html">NoiseFilter</a></li>
<li><a href="../classes/NormalMapFilter.html">NormalMapFilter</a></li>
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
<li><a href="../classes/PixiFastShader.html">PixiFastShader</a></li>
<li><a href="../classes/PixiShader.html">PixiShader</a></li>
<li><a href="../classes/Point.html">Point</a></li>
<li><a href="../classes/Polygon.html">Polygon</a></li>
<li><a href="../classes/PolyK.html">PolyK</a></li>
<li><a href="../classes/PrimitiveShader.html">PrimitiveShader</a></li>
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
<li><a href="../classes/RenderTexture.html">RenderTexture</a></li>
<li><a href="../classes/RGBSplitFilter.html">RGBSplitFilter</a></li>
<li><a href="../classes/Rope.html">Rope</a></li>
<li><a href="../classes/Rounded Rectangle.html">Rounded Rectangle</a></li>
<li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li>
<li><a href="../classes/SmartBlurFilter.html">SmartBlurFilter</a></li>
<li><a href="../classes/Spine.html">Spine</a></li>
<li><a href="../classes/SpineLoader.html">SpineLoader</a></li>
<li><a href="../classes/Sprite.html">Sprite</a></li>
<li><a href="../classes/SpriteBatch.html">SpriteBatch</a></li>
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="../classes/Stage.html">Stage</a></li>
<li><a href="../classes/Strip.html">Strip</a></li>
<li><a href="../classes/StripShader.html">StripShader</a></li>
<li><a href="../classes/Text.html">Text</a></li>
<li><a href="../classes/Texture.html">Texture</a></li>
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
<li><a href="../classes/TiltShiftFilter.html">TiltShiftFilter</a></li>
<li><a href="../classes/TiltShiftXFilter.html">TiltShiftXFilter</a></li>
<li><a href="../classes/TiltShiftYFilter.html">TiltShiftYFilter</a></li>
<li><a href="../classes/TwistFilter.html">TwistFilter</a></li>
<li><a href="../classes/WebGLBlendModeManager.html">WebGLBlendModeManager</a></li>
<li><a href="../classes/WebGLFastSpriteBatch.html">WebGLFastSpriteBatch</a></li>
<li><a href="../classes/WebGLFilterManager.html">WebGLFilterManager</a></li>
<li><a href="../classes/WebGLGraphics.html">WebGLGraphics</a></li>
<li><a href="../classes/WebGLGraphicsData.html">WebGLGraphicsData</a></li>
<li><a href="../classes/WebGLMaskManager.html">WebGLMaskManager</a></li>
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
<li><a href="../classes/WebGLShaderManager.html">WebGLShaderManager</a></li>
<li><a href="../classes/WebGLSpriteBatch.html">WebGLSpriteBatch</a></li>
<li><a href="../classes/WebGLStencilManager.html">WebGLStencilManager</a></li>
</ul>
<ul id="api-modules" class="apis modules">
<li><a href="../modules/PIXI.html">PIXI</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-3-4">
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited" checked>
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1 class="file-heading">File: src/pixi/display/DisplayObjectContainer.js</h1>
<div class="file">
<pre class="code prettyprint linenums">
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* A DisplayObjectContainer represents a collection of display objects.
* It is the base class of all display objects that act as a container for other objects.
*
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
*/
PIXI.DisplayObjectContainer = function()
{
PIXI.DisplayObject.call( this );
/**
* [read-only] The array of children of this container.
*
* @property children
* @type Array<DisplayObject>
* @readOnly
*/
this.children = [];
// fast access to update transform..
};
// constructor
PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype );
PIXI.DisplayObjectContainer.prototype.constructor = PIXI.DisplayObjectContainer;
/**
* The width of the displayObjectContainer, setting this will actually modify the scale to achieve the value set
*
* @property width
* @type Number
*/
Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'width', {
get: function() {
return this.scale.x * this.getLocalBounds().width;
},
set: function(value) {
var width = this.getLocalBounds().width;
if(width !== 0)
{
this.scale.x = value / ( width/this.scale.x );
}
else
{
this.scale.x = 1;
}
this._width = value;
}
});
/**
* The height of the displayObjectContainer, setting this will actually modify the scale to achieve the value set
*
* @property height
* @type Number
*/
Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'height', {
get: function() {
return this.scale.y * this.getLocalBounds().height;
},
set: function(value) {
var height = this.getLocalBounds().height;
if(height !== 0)
{
this.scale.y = value / ( height/this.scale.y );
}
else
{
this.scale.y = 1;
}
this._height = value;
}
});
/**
* Adds a child to the container.
*
* @method addChild
* @param child {DisplayObject} The DisplayObject to add to the container
* @return {DisplayObject} The child that was added.
*/
PIXI.DisplayObjectContainer.prototype.addChild = function(child)
{
return this.addChildAt(child, this.children.length);
};
/**
* Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown
*
* @method addChildAt
* @param child {DisplayObject} The child to add
* @param index {Number} The index to place the child in
* @return {DisplayObject} The child that was added.
*/
PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
{
if(index >= 0 && index <= this.children.length)
{
if(child.parent)
{
child.parent.removeChild(child);
}
child.parent = this;
this.children.splice(index, 0, child);
if(this.stage)child.setStageReference(this.stage);
return child;
}
else
{
throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length);
}
};
/**
* Swaps the position of 2 Display Objects within this container.
*
* @method swapChildren
* @param child {DisplayObject}
* @param child2 {DisplayObject}
*/
PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
{
if(child === child2) {
return;
}
var index1 = this.getChildIndex(child);
var index2 = this.getChildIndex(child2);
if(index1 < 0 || index2 < 0) {
throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.');
}
this.children[index1] = child2;
this.children[index2] = child;
};
/**
* Returns the index position of a child DisplayObject instance
*
* @method getChildIndex
* @param child {DisplayObject} The DisplayObject instance to identify
* @return {Number} The index position of the child display object to identify
*/
PIXI.DisplayObjectContainer.prototype.getChildIndex = function(child)
{
var index = this.children.indexOf(child);
if (index === -1)
{
throw new Error('The supplied DisplayObject must be a child of the caller');
}
return index;
};
/**
* Changes the position of an existing child in the display object container
*
* @method setChildIndex
* @param child {DisplayObject} The child DisplayObject instance for which you want to change the index number
* @param index {Number} The resulting index number for the child display object
*/
PIXI.DisplayObjectContainer.prototype.setChildIndex = function(child, index)
{
if (index < 0 || index >= this.children.length)
{
throw new Error('The supplied index is out of bounds');
}
var currentIndex = this.getChildIndex(child);
this.children.splice(currentIndex, 1); //remove from old position
this.children.splice(index, 0, child); //add at new position
};
/**
* Returns the child at the specified index
*
* @method getChildAt
* @param index {Number} The index to get the child from
* @return {DisplayObject} The child at the given index, if any.
*/
PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
{
if (index < 0 || index >= this.children.length)
{
throw new Error('getChildAt: Supplied index '+ index +' does not exist in the child list, or the supplied DisplayObject must be a child of the caller');
}
return this.children[index];
};
/**
* Removes a child from the container.
*
* @method removeChild
* @param child {DisplayObject} The DisplayObject to remove
* @return {DisplayObject} The child that was removed.
*/
PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
{
var index = this.children.indexOf( child );
if(index === -1)return;
return this.removeChildAt( index );
};
/**
* Removes a child from the specified index position.
*
* @method removeChildAt
* @param index {Number} The index to get the child from
* @return {DisplayObject} The child that was removed.
*/
PIXI.DisplayObjectContainer.prototype.removeChildAt = function(index)
{
var child = this.getChildAt( index );
if(this.stage)
child.removeStageReference();
child.parent = undefined;
this.children.splice( index, 1 );
return child;
};
/**
* Removes all children from this container that are within the begin and end indexes.
*
* @method removeChildren
* @param beginIndex {Number} The beginning position. Default value is 0.
* @param endIndex {Number} The ending position. Default value is size of the container.
*/
PIXI.DisplayObjectContainer.prototype.removeChildren = function(beginIndex, endIndex)
{
var begin = beginIndex || 0;
var end = typeof endIndex === 'number' ? endIndex : this.children.length;
var range = end - begin;
if (range > 0 && range <= end)
{
var removed = this.children.splice(begin, range);
for (var i = 0; i < removed.length; i++) {
var child = removed[i];
if(this.stage)
child.removeStageReference();
child.parent = undefined;
}
return removed;
}
else if (range === 0 && this.children.length === 0)
{
return [];
}
else
{
throw new Error( 'removeChildren: Range Error, numeric values are outside the acceptable range' );
}
};
/*
* Updates the transform on all children of this container for rendering
*
* @method updateTransform
* @private
*/
PIXI.DisplayObjectContainer.prototype.updateTransform = function()
{
if(!this.visible)return;
this.displayObjectUpdateTransform();
//PIXI.DisplayObject.prototype.updateTransform.call( this );
if(this._cacheAsBitmap)return;
for(var i=0,j=this.children.length; i<j; i++)
{
this.children[i].updateTransform();
}
};
// performance increase to avoid using call.. (10x faster)
PIXI.DisplayObjectContainer.prototype.displayObjectContainerUpdateTransform = PIXI.DisplayObjectContainer.prototype.updateTransform;
/**
* Retrieves the bounds of the displayObjectContainer as a rectangle. The bounds calculation takes all visible children into consideration.
*
* @method getBounds
* @return {Rectangle} The rectangular bounding area
*/
PIXI.DisplayObjectContainer.prototype.getBounds = function()
{
if(this.children.length === 0)return PIXI.EmptyRectangle;
// TODO the bounds have already been calculated this render session so return what we have
var minX = Infinity;
var minY = Infinity;
var maxX = -Infinity;
var maxY = -Infinity;
var childBounds;
var childMaxX;
var childMaxY;
var childVisible = false;
for(var i=0,j=this.children.length; i<j; i++)
{
var child = this.children[i];
if(!child.visible)continue;
childVisible = true;
childBounds = this.children[i].getBounds();
minX = minX < childBounds.x ? minX : childBounds.x;
minY = minY < childBounds.y ? minY : childBounds.y;
childMaxX = childBounds.width + childBounds.x;
childMaxY = childBounds.height + childBounds.y;
maxX = maxX > childMaxX ? maxX : childMaxX;
maxY = maxY > childMaxY ? maxY : childMaxY;
}
if(!childVisible)
return PIXI.EmptyRectangle;
var bounds = this._bounds;
bounds.x = minX;
bounds.y = minY;
bounds.width = maxX - minX;
bounds.height = maxY - minY;
// TODO: store a reference so that if this function gets called again in the render cycle we do not have to recalculate
//this._currentBounds = bounds;
return bounds;
};
/**
* Retrieves the non-global local bounds of the displayObjectContainer as a rectangle. The calculation takes all visible children into consideration.
*
* @method getLocalBounds
* @return {Rectangle} The rectangular bounding area
*/
PIXI.DisplayObjectContainer.prototype.getLocalBounds = function()
{
var matrixCache = this.worldTransform;
this.worldTransform = PIXI.identityMatrix;
for(var i=0,j=this.children.length; i<j; i++)
{
this.children[i].updateTransform();
}
var bounds = this.getBounds();
this.worldTransform = matrixCache;
return bounds;
};
/**
* Sets the containers Stage reference. This is the Stage that this object, and all of its children, is connected to.
*
* @method setStageReference
* @param stage {Stage} the stage that the container will have as its current stage reference
*/
PIXI.DisplayObjectContainer.prototype.setStageReference = function(stage)
{
this.stage = stage;
if(this._interactive)this.stage.dirty = true;
for(var i=0,j=this.children.length; i<j; i++)
{
var child = this.children[i];
child.setStageReference(stage);
}
};
/**
* Removes the current stage reference from the container and all of its children.
*
* @method removeStageReference
*/
PIXI.DisplayObjectContainer.prototype.removeStageReference = function()
{
for(var i=0,j=this.children.length; i<j; i++)
{
var child = this.children[i];
child.removeStageReference();
}
if(this._interactive)this.stage.dirty = true;
this.stage = null;
};
/**
* Renders the object using the WebGL renderer
*
* @method _renderWebGL
* @param renderSession {RenderSession}
* @private
*/
PIXI.DisplayObjectContainer.prototype._renderWebGL = function(renderSession)
{
if(!this.visible || this.alpha <= 0)return;
if(this._cacheAsBitmap)
{
this._renderCachedSprite(renderSession);
return;
}
var i,j;
if(this._mask || this._filters)
{
// push filter first as we need to ensure the stencil buffer is correct for any masking
if(this._filters)
{
renderSession.spriteBatch.flush();
renderSession.filterManager.pushFilter(this._filterBlock);
}
if(this._mask)
{
renderSession.spriteBatch.stop();
renderSession.maskManager.pushMask(this.mask, renderSession);
renderSession.spriteBatch.start();
}
// simple render children!
for(i=0,j=this.children.length; i<j; i++)
{
this.children[i]._renderWebGL(renderSession);
}
renderSession.spriteBatch.stop();
if(this._mask)renderSession.maskManager.popMask(this._mask, renderSession);
if(this._filters)renderSession.filterManager.popFilter();
renderSession.spriteBatch.start();
}
else
{
// simple render children!
for(i=0,j=this.children.length; i<j; i++)
{
this.children[i]._renderWebGL(renderSession);
}
}
};
/**
* Renders the object using the Canvas renderer
*
* @method _renderCanvas
* @param renderSession {RenderSession}
* @private
*/
PIXI.DisplayObjectContainer.prototype._renderCanvas = function(renderSession)
{
if(this.visible === false || this.alpha === 0)return;
if(this._cacheAsBitmap)
{
this._renderCachedSprite(renderSession);
return;
}
if(this._mask)
{
renderSession.maskManager.pushMask(this._mask, renderSession);
}
for(var i=0,j=this.children.length; i<j; i++)
{
var child = this.children[i];
child._renderCanvas(renderSession);
}
if(this._mask)
{
renderSession.maskManager.popMask(renderSession);
}
};
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
