/** * @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"; } 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"; } } /** * 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; this.maskManager = new PIXI.CanvasMaskManager(); this.renderSession = {}; this.renderSession.context = this.context; this.renderSession.maskManager = this.maskManager; }; // 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, context) { // no loger 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.context.f 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; }