jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Docs updated

Browse source
This commit is contained in:
Mat Groves 2013-11-02 11:37:42 +00:00
parent a46b74f8ca
commit 6c762fb396
119 changed files with 38715 additions and 9039 deletions
Download patch file Download diff file Expand all files Collapse all files

354
docs/files/src_pixi_renderers_canvas_CanvasRenderer.js.html
View file

@ -2,12 +2,12 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>src&#x2F;pixi&#x2F;renderers&#x2F;canvas&#x2F;CanvasRenderer.js - Pixi.JS</title>
<link rel="stylesheet" href="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.8.0&#x2F;build&#x2F;cssgrids&#x2F;cssgrids-min.css">
<link rel="stylesheet" href="..&#x2F;assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="..&#x2F;assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="..&#x2F;assets/favicon.png">
<script src="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?3.8.0&#x2F;build&#x2F;yui&#x2F;yui-min.js"></script>
<title>src/pixi/renderers/canvas/CanvasRenderer.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">
@ -15,7 +15,7 @@
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="http:&#x2F;&#x2F;www.goodboydigital.com&#x2F;pixijs&#x2F;logo_small.png" title="Pixi.JS"></h1>
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="Pixi.JS"></h1>
</div>
<div class="yui3-u-1-4 version">
@ -41,71 +41,95 @@
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li>
<li><a href="..&#x2F;classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="..&#x2F;classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
<li><a href="..&#x2F;classes/Circle.html">Circle</a></li>
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="../classes/Circle.html">Circle</a></li>
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
<li><a href="..&#x2F;classes/Ellipse.html">Ellipse</a></li>
<li><a href="../classes/CustomRenderable.html">CustomRenderable</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/InteractionManager.html">InteractionManager</a></li>
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
<li><a href="..&#x2F;classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
<li><a href="..&#x2F;classes/MovieClip.html">MovieClip</a></li>
<li><a href="../classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/Point.html">Point</a></li>
<li><a href="../classes/GreyFilter.html">GreyFilter</a></li>
<li><a href="..&#x2F;classes/Polygon.html">Polygon</a></li>
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/Rectangle.html">Rectangle</a></li>
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
<li><a href="..&#x2F;classes/RenderTexture.html">RenderTexture</a></li>
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="..&#x2F;classes/Spine.html">Spine</a></li>
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
<li><a href="..&#x2F;classes/Sprite.html">Sprite</a></li>
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
<li><a href="..&#x2F;classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="../classes/Point.html">Point</a></li>
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="../classes/Polygon.html">Polygon</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="../classes/PolyK._convex.html">PolyK._convex</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
<li><a href="..&#x2F;classes/WebGLBatch.html">WebGLBatch</a></li>
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</a></li>
<li><a href="..&#x2F;classes/WebGLRenderer.html">WebGLRenderer</a></li>
<li><a href="../classes/PolyK.InteractionManager.html">PolyK.InteractionManager</a></li>
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
<li><a href="../classes/RenderTexture.html">RenderTexture</a></li>
<li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li>
<li><a href="../classes/Spine.html">Spine</a></li>
<li><a href="../classes/Sprite.html">Sprite</a></li>
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="../classes/Stage.html">Stage</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/WebGLBatch.html">WebGLBatch</a></li>
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
</ul>
<ul id="api-modules" class="apis modules">
<li><a href="..&#x2F;modules/PIXI.html">PIXI</a></li>
<li><a href="../modules/PIXI.html">PIXI</a></li>
</ul>
</div>
@ -142,105 +166,106 @@
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1 class="file-heading">File: src&#x2F;pixi&#x2F;renderers&#x2F;canvas&#x2F;CanvasRenderer.js</h1>
<h1 class="file-heading">File: src/pixi/renderers/canvas/CanvasRenderer.js</h1>
<div class="file">
<pre class="code prettyprint linenums">
&#x2F;**
* @author Mat Groves http:&#x2F;&#x2F;matgroves.com&#x2F; @Doormat23
*&#x2F;
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
&#x2F;**
/**
* the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL.
* Dont forget to add the view to your DOM or you will not see anything :)
*
* @class CanvasRenderer
* @constructor
* @param width {Number} the width of the canvas view
* @default 0
* @param height {Number} the height of the canvas view
* @default 0
* @param width=0 {Number} the width of the canvas view
* @param height=0 {Number} the height of the canvas view
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent {Boolean} the transparency of the render view, default false
* @default false
*
*&#x2F;
* @param transparent=false {Boolean} the transparency of the render view, default false
*/
PIXI.CanvasRenderer = function(width, height, view, transparent)
{
this.transparent = transparent;
&#x2F;**
/**
* The width of the canvas view
*
* @property width
* @type Number
* @default 800
*&#x2F;
*/
this.width = width || 800;
&#x2F;**
/**
* The height of the canvas view
*
* @property height
* @type Number
* @default 600
*&#x2F;
*/
this.height = height || 600;
this.refresh = true;
&#x2F;**
/**
* The canvas element that the everything is drawn to
*
* @property view
* @type Canvas
*&#x2F;
this.view = view || document.createElement( &#x27;canvas&#x27; );
&#x2F;&#x2F; hack to enable some hardware acceleration!
&#x2F;&#x2F;this.view.style[&quot;transform&quot;] = &quot;translatez(0)&quot;;
*/
this.view = view || document.createElement( &#x27;canvas&#x27; );
/**
* The canvas context that the everything is drawn to
* @property context
* @type Canvas 2d Context
*/
this.context = this.view.getContext(&quot;2d&quot;);
this.refresh = true;
// hack to enable some hardware acceleration!
//this.view.style[&quot;transform&quot;] = &quot;translatez(0)&quot;;
this.view.width = this.width;
this.view.height = this.height;
this.count = 0;
&#x2F;**
* The canvas context that the everything is drawn to
* @property context
* @type Canvas 2d Context
*&#x2F;
this.context = this.view.getContext(&quot;2d&quot;);
}
&#x2F;&#x2F; constructor
PIXI.CanvasRenderer.constructor = PIXI.CanvasRenderer;
// constructor
PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
&#x2F;**
/**
* Renders the stage to its canvas view
*
* @method render
* @param stage {Stage} the Stage element to be rendered
*&#x2F;
*/
PIXI.CanvasRenderer.prototype.render = function(stage)
{
&#x2F;&#x2F; update children if need be
&#x2F;&#x2F;stage.__childrenAdded = [];
&#x2F;&#x2F;stage.__childrenRemoved = [];
//stage.__childrenAdded = [];
//stage.__childrenRemoved = [];
&#x2F;&#x2F; update textures if need be
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
PIXI.visibleCount++;
stage.updateTransform();
&#x2F;&#x2F; update the background color
// update the background color
if(this.view.style.backgroundColor!=stage.backgroundColorString &amp;&amp; !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString;
this.context.setTransform(1,0,0,1,0,0);
this.context.clearRect(0, 0, this.width, this.height)
this.renderDisplayObject(stage);
&#x2F;&#x2F;as
//as
&#x2F;&#x2F; run interaction!
// run interaction!
if(stage.interactive)
{
&#x2F;&#x2F;need to add some events!
//need to add some events!
if(!stage._interactiveEventsAdded)
{
stage._interactiveEventsAdded = true;
@ -248,18 +273,22 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
}
}
&#x2F;&#x2F; remove frame updates..
// remove frame updates..
if(PIXI.Texture.frameUpdates.length &gt; 0)
{
PIXI.Texture.frameUpdates = [];
}
}
&#x2F;**
/**
* resizes the canvas view to the specified width and height
* @param the new width of the canvas view
* @param the new height of the canvas view
*&#x2F;
*
* @method resize
* @param width {Number} the new width of the canvas view
* @param height {Number} the new height of the canvas view
*/
PIXI.CanvasRenderer.prototype.resize = function(width, height)
{
this.width = width;
@ -269,19 +298,22 @@ PIXI.CanvasRenderer.prototype.resize = function(width, height)
this.view.height = height;
}
&#x2F;**
/**
* Renders a display object
*
* @method renderDisplayObject
* @param displayObject {DisplayObject} The displayObject to render
* @private
*&#x2F;
*/
PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
{
&#x2F;&#x2F; no loger recurrsive!
// no loger recurrsive!
var transform;
var context = this.context;
context.globalCompositeOperation = &#x27;source-over&#x27;;
&#x2F;&#x2F; one the display object hits this. we can break the loop
// one the display object hits this. we can break the loop
var testObject = displayObject.last._iNext;
displayObject = displayObject.first;
@ -306,7 +338,7 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
var frame = displayObject.texture.frame;
if(frame)
if(frame &amp;&amp; frame.width &amp;&amp; frame.height)
{
context.globalAlpha = displayObject.worldAlpha;
@ -335,6 +367,7 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
}
else if(displayObject instanceof PIXI.CustomRenderable)
{
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
displayObject.renderCanvas(this);
}
else if(displayObject instanceof PIXI.Graphics)
@ -344,59 +377,69 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
}
else if(displayObject instanceof PIXI.FilterBlock)
{
if(displayObject.open)
{
context.save();
var cacheAlpha = displayObject.mask.alpha;
var maskTransform = displayObject.mask.worldTransform;
context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5])
displayObject.mask.worldAlpha = 0.5;
context.worldAlpha = 0;
PIXI.CanvasGraphics.renderGraphicsMask(displayObject.mask, context);
&#x2F;&#x2F; context.fillStyle = 0xFF0000;
&#x2F;&#x2F; context.fillRect(0, 0, 200, 200);
context.clip();
displayObject.mask.worldAlpha = cacheAlpha;
&#x2F;&#x2F;context.globalCompositeOperation = &#x27;lighter&#x27;;
if(displayObject.data instanceof PIXI.Graphics)
{
var mask = displayObject.data;
if(displayObject.open)
{
context.save();
var cacheAlpha = mask.alpha;
var maskTransform = mask.worldTransform;
context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5])
mask.worldAlpha = 0.5;
context.worldAlpha = 0;
PIXI.CanvasGraphics.renderGraphicsMask(mask, context);
context.clip();
mask.worldAlpha = cacheAlpha;
}
else
{
context.restore();
}
}
else
{
&#x2F;&#x2F;context.globalCompositeOperation = &#x27;source-over&#x27;;
context.restore();
// only masks supported right now!
}
}
&#x2F;&#x2F; count++
// count++
displayObject = displayObject._iNext;
}
while(displayObject != testObject)
}
&#x2F;**
/**
* Renders a flat strip
*
* @method renderStripFlat
* @param strip {Strip} The Strip to render
* @private
*&#x2F;
*/
PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
{
var context = this.context;
var verticies = strip.verticies;
var uvs = strip.uvs;
var length = verticies.length&#x2F;2;
var length = verticies.length/2;
this.count++;
context.beginPath();
for (var i=1; i &lt; length-2; i++)
{
&#x2F;&#x2F; draw some triangles!
// draw some triangles!
var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
@ -413,9 +456,13 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
context.closePath();
}
&#x2F;**
/**
* Renders a tiling sprite
*
* @method renderTilingSprite
* @param sprite {TilingSprite} The tilingsprite to render
* @private
*&#x2F;
*/
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
{
var context = this.context;
@ -429,38 +476,40 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale;
&#x2F;&#x2F; offset
// offset
context.scale(tileScale.x,tileScale.y);
context.translate(tilePosition.x, tilePosition.y);
context.fillStyle = sprite.__tilePattern;
context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width &#x2F; tileScale.x, sprite.height &#x2F; tileScale.y);
context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y);
context.scale(1&#x2F;tileScale.x, 1&#x2F;tileScale.y);
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}
&#x2F;**
/**
* Renders a strip
*
* @method renderStrip
* @param strip {Strip} The Strip to render
* @private
*&#x2F;
*/
PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
{
var context = this.context;
&#x2F;&#x2F;context.globalCompositeOperation = &#x27;lighter&#x27;;
&#x2F;&#x2F; draw triangles!!
// draw triangles!!
var verticies = strip.verticies;
var uvs = strip.uvs;
var length = verticies.length&#x2F;2;
var length = verticies.length/2;
this.count++;
for (var i=1; i &lt; length-2; i++)
{
&#x2F;&#x2F; draw some triangles!
// draw some triangles!
var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
@ -477,12 +526,10 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
context.lineTo(x2, y2);
context.closePath();
&#x2F;&#x2F; context.fillStyle = &quot;white&quot;&#x2F;&#x2F;rgb(1, 1, 1,1));
&#x2F;&#x2F; context.fill();
context.clip();
&#x2F;&#x2F; Compute matrix transform
// Compute matrix transform
var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
@ -494,25 +541,16 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
context.transform(delta_a&#x2F;delta, delta_d&#x2F;delta,
delta_b&#x2F;delta, delta_e&#x2F;delta,
delta_c&#x2F;delta, delta_f&#x2F;delta);
context.transform(delta_a/delta, delta_d/delta,
delta_b/delta, delta_e/delta,
delta_c/delta, delta_f/delta);
context.drawImage(strip.texture.baseTexture.source, 0, 0);
context.restore();
};
&#x2F;&#x2F; context.globalCompositeOperation = &#x27;source-over&#x27;;
}
</pre>
</div>
@ -522,13 +560,13 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
</div>
</div>
</div>
<script src="..&#x2F;assets/vendor/prettify/prettify-min.js"></script>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="..&#x2F;assets/js/yui-prettify.js"></script>
<script src="..&#x2F;assets/../api.js"></script>
<script src="..&#x2F;assets/js/api-filter.js"></script>
<script src="..&#x2F;assets/js/api-list.js"></script>
<script src="..&#x2F;assets/js/api-search.js"></script>
<script src="..&#x2F;assets/js/apidocs.js"></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>