<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>src/pixi/geom/Matrix.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/geom/Matrix.js</h1>
<div class="file">
<pre class="code prettyprint linenums">
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* The Matrix class is now an object, which makes it a lot faster,
* here is a representation of it :
* | a | b | tx|
* | c | d | ty|
* | 0 | 0 | 1 |
*
* @class Matrix
* @constructor
*/
PIXI.Matrix = function()
{
/**
* @property a
* @type Number
* @default 1
*/
this.a = 1;
/**
* @property b
* @type Number
* @default 0
*/
this.b = 0;
/**
* @property c
* @type Number
* @default 0
*/
this.c = 0;
/**
* @property d
* @type Number
* @default 1
*/
this.d = 1;
/**
* @property tx
* @type Number
* @default 0
*/
this.tx = 0;
/**
* @property ty
* @type Number
* @default 0
*/
this.ty = 0;
};
/**
* Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows:
*
* a = array[0]
* b = array[1]
* c = array[3]
* d = array[4]
* tx = array[2]
* ty = array[5]
*
* @method fromArray
* @param array {Array} The array that the matrix will be populated from.
*/
PIXI.Matrix.prototype.fromArray = function(array)
{
this.a = array[0];
this.b = array[1];
this.c = array[3];
this.d = array[4];
this.tx = array[2];
this.ty = array[5];
};
/**
* Creates an array from the current Matrix object.
*
* @method toArray
* @param transpose {Boolean} Whether we need to transpose the matrix or not
* @return {Array} the newly created array which contains the matrix
*/
PIXI.Matrix.prototype.toArray = function(transpose)
{
if(!this.array) this.array = new PIXI.Float32Array(9);
var array = this.array;
if(transpose)
{
array[0] = this.a;
array[1] = this.b;
array[2] = 0;
array[3] = this.c;
array[4] = this.d;
array[5] = 0;
array[6] = this.tx;
array[7] = this.ty;
array[8] = 1;
}
else
{
array[0] = this.a;
array[1] = this.c;
array[2] = this.tx;
array[3] = this.b;
array[4] = this.d;
array[5] = this.ty;
array[6] = 0;
array[7] = 0;
array[8] = 1;
}
return array;
};
/**
* Get a new position with the current transformation applied.
* Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering)
*
* @method apply
* @param pos {Point} The origin
* @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input)
* @return {Point} The new point, transformed through this matrix
*/
PIXI.Matrix.prototype.apply = function(pos, newPos)
{
newPos = newPos || new PIXI.Point();
newPos.x = this.a * pos.x + this.c * pos.y + this.tx;
newPos.y = this.b * pos.x + this.d * pos.y + this.ty;
return newPos;
};
/**
* Get a new position with the inverse of the current transformation applied.
* Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input)
*
* @method applyInverse
* @param pos {Point} The origin
* @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input)
* @return {Point} The new point, inverse-transformed through this matrix
*/
PIXI.Matrix.prototype.applyInverse = function(pos, newPos)
{
newPos = newPos || new PIXI.Point();
var id = 1 / (this.a * this.d + this.c * -this.b);
newPos.x = this.d * id * pos.x + -this.c * id * pos.y + (this.ty * this.c - this.tx * this.d) * id;
newPos.y = this.a * id * pos.y + -this.b * id * pos.x + (-this.ty * this.a + this.tx * this.b) * id;
return newPos;
};
/**
* Translates the matrix on the x and y.
*
* @method translate
* @param {Number} x
* @param {Number} y
* @return {Matrix} This matrix. Good for chaining method calls.
**/
PIXI.Matrix.prototype.translate = function(x, y)
{
this.tx += x;
this.ty += y;
return this;
};
/**
* Applies a scale transformation to the matrix.
*
* @method scale
* @param {Number} x The amount to scale horizontally
* @param {Number} y The amount to scale vertically
* @return {Matrix} This matrix. Good for chaining method calls.
**/
PIXI.Matrix.prototype.scale = function(x, y)
{
this.a *= x;
this.d *= y;
this.c *= x;
this.b *= y;
this.tx *= x;
this.ty *= y;
return this;
};
/**
* Applies a rotation transformation to the matrix.
* @method rotate
* @param {Number} angle The angle in radians.
* @return {Matrix} This matrix. Good for chaining method calls.
**/
PIXI.Matrix.prototype.rotate = function(angle)
{
var cos = Math.cos( angle );
var sin = Math.sin( angle );
var a1 = this.a;
var c1 = this.c;
var tx1 = this.tx;
this.a = a1 * cos-this.b * sin;
this.b = a1 * sin+this.b * cos;
this.c = c1 * cos-this.d * sin;
this.d = c1 * sin+this.d * cos;
this.tx = tx1 * cos - this.ty * sin;
this.ty = tx1 * sin + this.ty * cos;
return this;
};
/**
* Appends the given Matrix to this Matrix.
*
* @method append
* @param {Matrix} matrix
* @return {Matrix} This matrix. Good for chaining method calls.
*/
PIXI.Matrix.prototype.append = function(matrix)
{
var a1 = this.a;
var b1 = this.b;
var c1 = this.c;
var d1 = this.d;
this.a = matrix.a * a1 + matrix.b * c1;
this.b = matrix.a * b1 + matrix.b * d1;
this.c = matrix.c * a1 + matrix.d * c1;
this.d = matrix.c * b1 + matrix.d * d1;
this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx;
this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty;
return this;
};
/**
* Resets this Matix to an identity (default) matrix.
*
* @method identity
* @return {Matrix} This matrix. Good for chaining method calls.
*/
PIXI.Matrix.prototype.identity = function()
{
this.a = 1;
this.b = 0;
this.c = 0;
this.d = 1;
this.tx = 0;
this.ty = 0;
return this;
};
PIXI.identityMatrix = new PIXI.Matrix();
</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>
