pixi.js/docs/files/src_pixi_renderers_canvas_CanvasRenderer.js.html
Mat Groves 847eb6c48e Docs updated
Fixed issue where alpha not being set correctly in canvas spriteBatch
Fixed issue where previous stage events did not get removed correctly
2014-01-28 00:08:50 +00:00

539 lines
19 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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">
<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: 1.4.3</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/AlphaMaskFilter.html">AlphaMaskFilter</a></li>
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="../classes/AtlasLoader.html">AtlasLoader</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/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</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/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/EventTarget.html">EventTarget</a></li>
<li><a href="../classes/Graphics.html">Graphics</a></li>
<li><a href="../classes/GrayFilter.html">GrayFilter</a></li>
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
<li><a href="../classes/PIXI.PixiFastShader.html">PIXI.PixiFastShader</a></li>
<li><a href="../classes/PIXI.PixiShader.html">PIXI.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._convex.html">PolyK._convex</a></li>
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</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/TwistFilter.html">TwistFilter</a></li>
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</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/renderers/canvas/CanvasRenderer.js</h1>
<div class="file">
<pre class="code prettyprint linenums">
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* 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=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=false {Boolean} the transparency of the render view, default false
*/
PIXI.CanvasRenderer = function(width, height, view, transparent)
{
PIXI.defaultRenderer = PIXI.defaultRenderer || this;
this.type = PIXI.CANVAS_RENDERER;
this.transparent = !!transparent;
if(!PIXI.blendModesCanvas)
{
PIXI.blendModesCanvas = [];
if(PIXI.canUseNewCanvasBlendModes())
{
PIXI.blendModesCanvas[PIXI.blendModes.NORMAL] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.ADD] = &quot;lighter&quot;; //IS THIS OK???
PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = &quot;multiply&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = &quot;screen&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = &quot;overlay&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = &quot;darken&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = &quot;lighten&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = &quot;color-dodge&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = &quot;color-burn&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = &quot;hard-light&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = &quot;soft-light&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = &quot;difference&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = &quot;exclusion&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.HUE] = &quot;hue&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = &quot;saturation&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = &quot;color&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = &quot;luminosity&quot;;
}
else
{
// this means that the browser does not support the cool new blend modes in canvas &quot;cough&quot; ie &quot;cough&quot;
PIXI.blendModesCanvas[PIXI.blendModes.NORMAL] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.ADD] = &quot;lighter&quot;; //IS THIS OK???
PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.HUE] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = &quot;source-over&quot;;
PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = &quot;source-over&quot;;
}
}
/**
* The width of the canvas view
*
* @property width
* @type Number
* @default 800
*/
this.width = width || 800;
/**
* The height of the canvas view
*
* @property height
* @type Number
* @default 600
*/
this.height = height || 600;
/**
* The canvas element that the everything is drawn to
*
* @property view
* @type Canvas
*/
this.view = view || document.createElement( &quot;canvas&quot; );
/**
* The canvas context that the everything is drawn to
* @property context
* @type Canvas 2d Context
*/
this.context = this.view.getContext( &quot;2d&quot;, { alpha: this.transparent } );
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;
this.maskManager = new PIXI.CanvasMaskManager();
this.renderSession = {
context: this.context,
maskManager: this.maskManager,
scaleMode: null,
smoothProperty: null
};
if(&quot;imageSmoothingEnabled&quot; in this.context)
this.renderSession.smoothProperty = &quot;imageSmoothingEnabled&quot;;
else if(&quot;webkitImageSmoothingEnabled&quot; in this.context)
this.renderSession.smoothProperty = &quot;webkitImageSmoothingEnabled&quot;;
else if(&quot;mozImageSmoothingEnabled&quot; in this.context)
this.renderSession.smoothProperty = &quot;mozImageSmoothingEnabled&quot;;
else if(&quot;oImageSmoothingEnabled&quot; in this.context)
this.renderSession.smoothProperty = &quot;oImageSmoothingEnabled&quot;;
};
// constructor
PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
/**
* Renders the stage to its canvas view
*
* @method render
* @param stage {Stage} the Stage element to be rendered
*/
PIXI.CanvasRenderer.prototype.render = function(stage)
{
//stage.__childrenAdded = [];
//stage.__childrenRemoved = [];
// update textures if need be
PIXI.texturesToUpdate.length = 0;
PIXI.texturesToDestroy.length = 0;
stage.updateTransform();
// 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);
if(this.view.style.backgroundColor !== stage.backgroundColorString )
{
if(!this.transparent)
{
this.context.fillStyle = stage.backgroundColorString;
this.context.fillRect(0, 0, this.width, this.height);
}
else
{
this.context.clearRect(0, 0, this.width, this.height);
}
}
//console.log(this.view.style.backgroundColor)
this.renderDisplayObject(stage);
// run interaction!
if(stage.interactive)
{
//need to add some events!
if(!stage._interactiveEventsAdded)
{
stage._interactiveEventsAdded = true;
stage.interactionManager.setTarget(this);
}
}
// remove frame updates..
if(PIXI.Texture.frameUpdates.length &gt; 0)
{
PIXI.Texture.frameUpdates.length = 0;
}
};
/**
* resizes the canvas view to the specified width and height
*
* @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;
this.height = height;
this.view.width = width;
this.view.height = height;
};
/**
* Renders a display object
*
* @method renderDisplayObject
* @param displayObject {DisplayObject} The displayObject to render
* @private
*/
PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject, context)
{
// no longer recurrsive!
//var transform;
//var context = this.context;
this.renderSession.context = context || this.context;
displayObject._renderCanvas(this.renderSession);
};
/**
* Renders a flat strip
*
* @method renderStripFlat
* @param strip {Strip} The Strip to render
* @private
*/
PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
{
var context = this.context;
var verticies = strip.verticies;
var length = verticies.length/2;
this.count++;
context.beginPath();
for (var i=1; i &lt; length-2; i++)
{
// draw some triangles!
var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
}
context.fillStyle = &quot;#FF0000&quot;;
context.fill();
context.closePath();
};
/**
* Renders a strip
*
* @method renderStrip
* @param strip {Strip} The Strip to render
* @private
*/
PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
{
var context = this.context;
// draw triangles!!
var verticies = strip.verticies;
var uvs = strip.uvs;
var length = verticies.length/2;
this.count++;
for (var i = 1; i &lt; length-2; i++)
{
// draw some triangles!
var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width;
var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height;
context.save();
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
context.clip();
// Compute matrix transform
var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;
context.transform(deltaA / delta, deltaD / delta,
deltaB / delta, deltaE / delta,
deltaC / delta, deltaF / delta);
context.drawImage(strip.texture.baseTexture.source, 0, 0);
context.restore();
}
};
PIXI.CanvasBuffer = function(width, height)
{
this.width = width;
this.height = height;
this.canvas = document.createElement( &quot;canvas&quot; );
this.context = this.canvas.getContext( &quot;2d&quot; );
this.canvas.width = width;
this.canvas.height = height;
};
PIXI.CanvasBuffer.prototype.clear = function()
{
this.context.clearRect(0,0, this.width, this.height);
};
PIXI.CanvasBuffer.prototype.resize = function(width, height)
{
this.width = this.canvas.width = width;
this.height = this.canvas.height = height;
};
</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>