/**
* @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)
{
this.transparent = transparent;
/**
* 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' );
//some filter variables
this.smoothProperty = null;
if('imageSmoothingEnabled' in this.context)
this.smoothProperty = 'imageSmoothingEnabled';
else if('webkitImageSmoothingEnabled' in this.context)
this.smoothProperty = 'webkitImageSmoothingEnabled';
else if('mozImageSmoothingEnabled' in this.context)
this.smoothProperty = 'mozImageSmoothingEnabled';
else if('oImageSmoothingEnabled' in this.context)
this.smoothProperty = 'oImageSmoothingEnabled';
this.scaleMode = null;
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;
};
// 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 = [];
PIXI.texturesToDestroy = [];
PIXI.visibleCount++;
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);
this.context.clearRect(0, 0, this.width, this.height);
this.renderDisplayObject(stage);
//as
// 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 = [];
}
};
/**
* 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)
{
// no loger recurrsive!
var transform;
var context = this.context;
context.globalCompositeOperation = 'source-over';
// one the display object hits this. we can break the loop
var testObject = displayObject.last._iNext;
displayObject = displayObject.first;
do
{
transform = displayObject.worldTransform;
if(!displayObject.visible)
{
displayObject = displayObject.last._iNext;
continue;
}
if(!displayObject.renderable)
{
displayObject = displayObject._iNext;
continue;
}
if(displayObject instanceof PIXI.Sprite)
{
var frame = displayObject.texture.frame;
//ignore null sources
if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source)
{
context.globalAlpha = displayObject.worldAlpha;
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
//if smoothingEnabled is supported and we need to change the smoothing property for this texture
if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) {
this.scaleMode = displayObject.texture.baseTexture.scaleMode;
context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR);
}
context.drawImage(displayObject.texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
(displayObject.anchor.x) * -frame.width,
(displayObject.anchor.y) * -frame.height,
frame.width,
frame.height);
}
}
else if(displayObject instanceof PIXI.Strip)
{
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
this.renderStrip(displayObject);
}
else if(displayObject instanceof PIXI.TilingSprite)
{
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
this.renderTilingSprite(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)
{
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
PIXI.CanvasGraphics.renderGraphics(displayObject, context);
}
else if(displayObject instanceof PIXI.FilterBlock)
{
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();
}
}
}
//count++
displayObject = displayObject._iNext;
}
while(displayObject !== testObject);
};
/**
* 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 tiling sprite
*
* @method renderTilingSprite
* @param sprite {TilingSprite} The tilingsprite to render
* @private
*/
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
{
var context = this.context;
context.globalAlpha = sprite.worldAlpha;
if(!sprite.__tilePattern)
sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat');
context.beginPath();
var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale;
// 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 / tileScale.x, sprite.height / tileScale.y);
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
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();
}
};
