
Fixed issue where alpha not being set correctly in canvas spriteBatch Fixed issue where previous stage events did not get removed correctly
539 lines
19 KiB
HTML
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] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.ADD] = "lighter"; //IS THIS OK???
|
|
PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "multiply";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = "screen";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = "overlay";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = "darken";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = "lighten";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "color-dodge";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "color-burn";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "hard-light";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "soft-light";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "difference";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "exclusion";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.HUE] = "hue";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "saturation";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = "color";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "luminosity";
|
|
}
|
|
else
|
|
{
|
|
// this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough"
|
|
PIXI.blendModesCanvas[PIXI.blendModes.NORMAL] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.ADD] = "lighter"; //IS THIS OK???
|
|
PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.HUE] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = "source-over";
|
|
PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "source-over";
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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( "canvas" );
|
|
|
|
/**
|
|
* The canvas context that the everything is drawn to
|
|
* @property context
|
|
* @type Canvas 2d Context
|
|
*/
|
|
this.context = this.view.getContext( "2d", { alpha: this.transparent } );
|
|
|
|
this.refresh = true;
|
|
// hack to enable some hardware acceleration!
|
|
//this.view.style["transform"] = "translatez(0)";
|
|
|
|
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("imageSmoothingEnabled" in this.context)
|
|
this.renderSession.smoothProperty = "imageSmoothingEnabled";
|
|
else if("webkitImageSmoothingEnabled" in this.context)
|
|
this.renderSession.smoothProperty = "webkitImageSmoothingEnabled";
|
|
else if("mozImageSmoothingEnabled" in this.context)
|
|
this.renderSession.smoothProperty = "mozImageSmoothingEnabled";
|
|
else if("oImageSmoothingEnabled" in this.context)
|
|
this.renderSession.smoothProperty = "oImageSmoothingEnabled";
|
|
};
|
|
|
|
// 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 && !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 > 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 < 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 = "#FF0000";
|
|
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 < 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( "canvas" );
|
|
this.context = this.canvas.getContext( "2d" );
|
|
|
|
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>
|