diff --git a/js/rendering/FrameRenderer.js b/js/rendering/FrameRenderer.js index b891f040..7e49416f 100644 --- a/js/rendering/FrameRenderer.js +++ b/js/rendering/FrameRenderer.js @@ -10,9 +10,7 @@ ns.FrameRenderer = function (container, renderingOptions, classes) { this.defaultRenderingOptions = { 'supportGridRendering' : false, - 'zoom' : 1, - 'xOffset' : 0, - 'yOffset' : 0 + 'zoom' : 1 }; renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions); @@ -28,11 +26,12 @@ this.container = container; this.zoom = renderingOptions.zoom; - this.xOffset = renderingOptions.xOffset; - this.yOffset = renderingOptions.yOffset; - this.pixelOffsetHeight = 0; - this.pixelOffsetWidth = 0; + this.frameOffsetX = 0; + this.frameOffsetY = 0; + + this.marginY = 0; + this.marginX = 0; this.supportGridRendering = renderingOptions.supportGridRendering; @@ -49,7 +48,7 @@ * Displayed canvas, scaled-up from the offdom canvas * @type {HTMLElement} */ - this.scaledCanvas = null; + this.displayCanvas = null; this.setDisplaySize(renderingOptions.width, renderingOptions.height); this.enableGrid(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)); @@ -69,23 +68,23 @@ ns.FrameRenderer.prototype.setDisplaySize = function (width, height) { this.displayHeight = height; this.displayWidth = width; - if (this.scaledCanvas) { - $(this.scaledCanvas).remove(); - this.scaledCanvas = null; + if (this.displayCanvas) { + $(this.displayCanvas).remove(); + this.displayCanvas = null; } }; - ns.FrameRenderer.prototype.updatePixelOffsets_ = function () { + ns.FrameRenderer.prototype.updateMargins_ = function () { if (!this.isAutoSized_()) { - var deltaH = this.displayHeight - (this.zoom * this.canvas.height); - this.pixelOffsetHeight = Math.max(0, deltaH) / 2; + var deltaX = this.displayWidth - (this.zoom * this.canvas.width); + this.marginX = Math.max(0, deltaX) / 2; - var deltaW = this.displayWidth - (this.zoom * this.canvas.width); - this.pixelOffsetWidth = Math.max(0, deltaW) / 2; + var deltaY = this.displayHeight - (this.zoom * this.canvas.height); + this.marginY = Math.max(0, deltaY) / 2; } }; - ns.FrameRenderer.prototype.createScaledCanvas_ = function () { + ns.FrameRenderer.prototype.createDisplayCanvas_ = function () { var height = this.displayHeight; var width = this.displayWidth; @@ -94,16 +93,20 @@ width = this.zoom * this.canvas.width; } - this.scaledCanvas = pskl.CanvasUtils.createCanvas(width, height, this.classes); + this.displayCanvas = pskl.CanvasUtils.createCanvas(width, height, this.classes); if (true || this.zoom > 2) { - pskl.CanvasUtils.disableImageSmoothing(this.scaledCanvas); + pskl.CanvasUtils.disableImageSmoothing(this.displayCanvas); } - this.container.append(this.scaledCanvas); + this.container.append(this.displayCanvas); }; - ns.FrameRenderer.prototype.setDisplayOffset = function (xOffset, yOffset) { - this.xOffset = xOffset; - this.yOffset = yOffset; + ns.FrameRenderer.prototype.setDisplayOffset = function (frameOffsetX, frameOffsetY) { + this.frameOffsetX = frameOffsetX; + this.frameOffsetY = frameOffsetY; + }; + + ns.FrameRenderer.prototype.moveOffset = function (frameOffsetX, frameOffsetY) { + this.setDisplayOffset(this.frameOffsetX + frameOffsetX, this.frameOffsetY + frameOffsetY); }; /** @@ -138,14 +141,13 @@ ns.FrameRenderer.prototype.render = function (frame) { if (frame) { this.clear(); - this.drawFrameInCanvas_(frame); - this.lastRenderedFrame = frame; + this.renderFrame_(frame); } }; ns.FrameRenderer.prototype.clear = function () { pskl.CanvasUtils.clear(this.canvas); - pskl.CanvasUtils.clear(this.scaledCanvas); + pskl.CanvasUtils.clear(this.displayCanvas); }; ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) { @@ -162,8 +164,8 @@ */ ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) { var cellSize = this.zoom + this.gridStrokeWidth; - var xCoord = (coords.x - this.pixelOffsetWidth) + (this.xOffset * cellSize), - yCoord = (coords.y - this.pixelOffsetHeight) + (this.yOffset * cellSize); + var xCoord = (coords.x - this.marginX) + (this.frameOffsetX * cellSize), + yCoord = (coords.y - this.marginY) + (this.frameOffsetY * cellSize); return { "col" : (xCoord - xCoord % cellSize) / cellSize, "row" : (yCoord - yCoord % cellSize) / cellSize @@ -180,17 +182,11 @@ /** * @private */ - ns.FrameRenderer.prototype.drawFrameInCanvas_ = function (frame) { + ns.FrameRenderer.prototype.renderFrame_ = function (frame) { if (!this.canvas) { this.canvas = pskl.CanvasUtils.createCanvas(frame.getWidth(), frame.getHeight()); } - if (!this.scaledCanvas) { - this.createScaledCanvas_(); - } - - this.updatePixelOffsets_(); - var context = this.canvas.getContext('2d'); for(var col = 0, width = frame.getWidth(); col < width; col++) { for(var row = 0, height = frame.getHeight(); row < height; row++) { @@ -199,15 +195,21 @@ } } - context = this.scaledCanvas.getContext('2d'); + if (!this.displayCanvas) { + this.createDisplayCanvas_(); + } + + this.updateMargins_(); + + context = this.displayCanvas.getContext('2d'); context.save(); // zoom < 1 context.fillStyle = "#aaa"; // zoom < 1 - context.fillRect(0,0,this.scaledCanvas.width, this.scaledCanvas.height); - context.translate(this.pixelOffsetWidth, this.pixelOffsetHeight); + context.fillRect(0,0,this.displayCanvas.width, this.displayCanvas.height); + context.translate(this.marginX, this.marginY); context.scale(this.zoom, this.zoom); - context.translate(-this.xOffset, -this.yOffset); + context.translate(-this.frameOffsetX, -this.frameOffsetY); // zoom < 1 context.clearRect(0, 0, this.canvas.width, this.canvas.height); context.drawImage(this.canvas, 0, 0); diff --git a/js/utils/FrameUtils.js b/js/utils/FrameUtils.js index cb615527..7f422006 100644 --- a/js/utils/FrameUtils.js +++ b/js/utils/FrameUtils.js @@ -1,11 +1,11 @@ (function () { var ns = $.namespace('pskl.utils'); - + var colorCache = {}; ns.FrameUtils = { merge : function (frames) { var merged = null; if (frames.length) { - merged = frames[0].clone(); + merged = frames[0]; var w = merged.getWidth(), h = merged.getHeight(); for (var i = 1 ; i < frames.length ; i++) { pskl.utils.FrameUtils.mergeFrames_(merged, frames[i]); @@ -20,6 +20,77 @@ frameA.setPixel(col, row, p); } }); + }, + + /** + * Alpha compositing using porter duff algorithm : + * http://en.wikipedia.org/wiki/Alpha_compositing + * http://keithp.com/~keithp/porterduff/p253-porter.pdf + * @param {String} strColor1 color over + * @param {String} strColor2 color under + * @return {String} the composite color + */ + mergePixels : function (strColor1, strColor2, globalOpacity1) { + var col1 = pskl.utils.FrameUtils.toRgba(strColor1); + var col2 = pskl.utils.FrameUtils.toRgba(strColor2); + if (typeof globalOpacity1 == 'number') { + col1 = JSON.parse(JSON.stringify(col1)); + col1.a = globalOpacity1 * col1.a; + } + var a = col1.a + col2.a * (1 - col1.a); + + var r = ((col1.r * col1.a + col2.r * col2.a * (1 - col1.a)) / a)|0; + var g = ((col1.g * col1.a + col2.g * col2.a * (1 - col1.a)) / a)|0; + var b = ((col1.b * col1.a + col2.b * col2.a * (1 - col1.a)) / a)|0; + + return 'rgba('+r+','+g+','+b+','+a+')'; + }, + + /** + * Convert a color defined as a string (hex, rgba, rgb, 'TRANSPARENT') to an Object with r,g,b,a properties. + * r, g and b are integers between 0 and 255, a is a float between 0 and 1 + * @param {String} c color as a string + * @return {Object} {r:Number,g:Number,b:Number,a:Number} + */ + toRgba : function (c) { + if (colorCache[c]) { + return colorCache[c]; + } + var color, matches; + if (c === 'TRANSPARENT') { + color = { + r : 0, + g : 0, + b : 0, + a : 0 + }; + } else if (c.indexOf('rgba(') != -1) { + matches = /rgba\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(1|0\.\d+)\s*\)/.exec(c); + color = { + r : parseInt(matches[1],10), + g : parseInt(matches[2],10), + b : parseInt(matches[3],10), + a : parseFloat(matches[4]) + }; + } else if (c.indexOf('rgb(') != -1) { + matches = /rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(c); + color = { + r : parseInt(matches[1],10), + g : parseInt(matches[2],10), + b : parseInt(matches[3],10), + a : 1 + }; + } else { + matches = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(c); + color = { + r : parseInt(matches[1], 16), + g : parseInt(matches[2], 16), + b : parseInt(matches[3], 16), + a : 1 + }; + } + colorCache[c] = color; + return color; } }; -})(); \ No newline at end of file +})();