2012-09-04 16:10:16 +04:00
|
|
|
(function () {
|
|
|
|
var ns = $.namespace("pskl.rendering");
|
|
|
|
|
2012-09-08 17:34:13 +04:00
|
|
|
ns.FrameRenderer = function (container, renderingOptions, className) {
|
2012-09-09 00:26:17 +04:00
|
|
|
|
|
|
|
this.defaultRenderingOptions = {
|
2012-09-09 01:43:16 +04:00
|
|
|
"hasGrid" : false
|
2012-09-09 00:26:17 +04:00
|
|
|
};
|
|
|
|
renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
|
|
|
|
|
2012-09-08 17:08:00 +04:00
|
|
|
if(container == undefined) {
|
|
|
|
throw "Bad FrameRenderer initialization. <container> undefined.";
|
|
|
|
}
|
2012-09-09 00:26:17 +04:00
|
|
|
|
|
|
|
if(isNaN(renderingOptions.dpi)) {
|
2012-09-08 14:24:55 +04:00
|
|
|
throw "Bad FrameRenderer initialization. <dpi> not well defined.";
|
|
|
|
}
|
|
|
|
|
2012-09-09 00:26:17 +04:00
|
|
|
this.container = container;
|
2012-09-08 17:34:13 +04:00
|
|
|
this.dpi = renderingOptions.dpi;
|
2012-09-08 17:08:00 +04:00
|
|
|
this.className = className;
|
2012-09-09 00:26:17 +04:00
|
|
|
this.canvas = null;
|
2012-09-09 01:43:16 +04:00
|
|
|
this.hasGrid = renderingOptions.hasGrid;
|
|
|
|
this.gridStrokeWidth = 0;
|
|
|
|
|
|
|
|
this.lastRenderedFrame = null;
|
2012-09-08 18:32:28 +04:00
|
|
|
|
|
|
|
// Flag to know if the config was altered
|
|
|
|
this.canvasConfigDirty = true;
|
2012-09-09 01:43:16 +04:00
|
|
|
|
|
|
|
if(this.hasGrid) {
|
|
|
|
$.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.showGrid, this));
|
|
|
|
}
|
2012-09-08 17:08:00 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
ns.FrameRenderer.prototype.init = function (frame) {
|
|
|
|
this.render(frame);
|
2012-09-09 01:43:16 +04:00
|
|
|
this.lastRenderedFrame = frame;
|
2012-09-08 14:24:55 +04:00
|
|
|
};
|
|
|
|
|
2012-09-08 18:32:28 +04:00
|
|
|
ns.FrameRenderer.prototype.updateDPI = function (newDPI) {
|
|
|
|
this.dpi = newDPI;
|
|
|
|
this.canvasConfigDirty = true;
|
|
|
|
};
|
|
|
|
|
2012-09-09 01:43:16 +04:00
|
|
|
ns.FrameRenderer.prototype.showGrid = function (evt, show) {
|
|
|
|
|
|
|
|
this.gridStrokeWidth = 0;
|
|
|
|
if(show) {
|
|
|
|
this.gridStrokeWidth = Constants.GRID_STROKE_WIDTH;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.canvasConfigDirty = true;
|
|
|
|
|
|
|
|
if(this.lastRenderedFrame) {
|
|
|
|
this.render(this.lastRenderedFrame);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2012-09-08 17:08:00 +04:00
|
|
|
ns.FrameRenderer.prototype.render = function (frame) {
|
2012-09-09 04:34:54 +04:00
|
|
|
this.clear(frame);
|
|
|
|
var context = this.getCanvas_(frame).getContext('2d');
|
2012-09-04 16:10:16 +04:00
|
|
|
for(var col = 0, width = frame.getWidth(); col < width; col++) {
|
|
|
|
for(var row = 0, height = frame.getHeight(); row < height; row++) {
|
2012-09-09 04:34:54 +04:00
|
|
|
var color = frame.getPixel(col, row);
|
|
|
|
this.renderPixel_(color, col, row, context);
|
2012-09-04 16:10:16 +04:00
|
|
|
}
|
|
|
|
}
|
2012-09-09 01:43:16 +04:00
|
|
|
this.lastRenderedFrame = frame;
|
2012-09-04 16:10:16 +04:00
|
|
|
};
|
|
|
|
|
2012-09-08 17:08:00 +04:00
|
|
|
ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
|
2012-09-09 04:34:54 +04:00
|
|
|
var context = this.getCanvas_(frame).getContext('2d');
|
2012-09-04 16:10:16 +04:00
|
|
|
var color = frame.getPixel(col, row);
|
|
|
|
if(color == Constants.TRANSPARENT_COLOR) {
|
2012-09-09 04:34:54 +04:00
|
|
|
context.clearRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);
|
|
|
|
} else {
|
|
|
|
this.renderPixel_(color, col, row, context);
|
2012-09-04 16:10:16 +04:00
|
|
|
}
|
2012-09-09 01:43:16 +04:00
|
|
|
this.lastRenderedFrame = frame;
|
2012-09-04 16:10:16 +04:00
|
|
|
};
|
2012-09-08 17:08:00 +04:00
|
|
|
|
2012-09-09 04:34:54 +04:00
|
|
|
ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
|
|
|
|
if(color != Constants.TRANSPARENT_COLOR) {
|
|
|
|
context.fillStyle = color;
|
|
|
|
context.fillRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.FrameRenderer.prototype.clear = function (frame) {
|
|
|
|
var canvas = this.getCanvas_(frame);
|
2012-09-08 18:32:28 +04:00
|
|
|
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
|
2012-09-08 17:08:00 +04:00
|
|
|
};
|
|
|
|
|
2012-09-09 00:26:17 +04:00
|
|
|
/**
|
|
|
|
* Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
|
|
|
|
* frame) into a sprite coordinate in column and row.
|
|
|
|
* @public
|
|
|
|
*/
|
|
|
|
ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) {
|
|
|
|
var cellSize = this.dpi + this.gridStrokeWidth;
|
|
|
|
return {
|
|
|
|
"col" : (coords.x - coords.x % cellSize) / cellSize,
|
|
|
|
"row" : (coords.y - coords.y % cellSize) / cellSize
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
2012-09-09 04:34:54 +04:00
|
|
|
ns.FrameRenderer.prototype.getFramePos_ = function(index) {
|
|
|
|
return index * this.dpi + ((index - 1) * this.gridStrokeWidth);
|
2012-09-09 00:26:17 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
ns.FrameRenderer.prototype.drawGrid_ = function(canvas, width, height, col, row) {
|
|
|
|
var ctx = canvas.getContext("2d");
|
2012-09-09 01:43:16 +04:00
|
|
|
ctx.lineWidth = Constants.GRID_STROKE_WIDTH;
|
|
|
|
ctx.strokeStyle = Constants.GRID_STROKE_COLOR;
|
2012-09-09 00:26:17 +04:00
|
|
|
for(var c=1; c < col; c++) {
|
2012-09-09 04:34:54 +04:00
|
|
|
ctx.moveTo(this.getFramePos_(c), 0);
|
|
|
|
ctx.lineTo(this.getFramePos_(c), height);
|
2012-09-09 00:26:17 +04:00
|
|
|
ctx.stroke();
|
|
|
|
}
|
|
|
|
|
|
|
|
for(var r=1; r < row; r++) {
|
2012-09-09 04:34:54 +04:00
|
|
|
ctx.moveTo(0, this.getFramePos_(r));
|
|
|
|
ctx.lineTo(width, this.getFramePos_(r));
|
2012-09-09 00:26:17 +04:00
|
|
|
ctx.stroke();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2012-09-08 17:08:00 +04:00
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
2012-09-08 18:32:28 +04:00
|
|
|
ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
|
|
|
|
if(this.canvasConfigDirty) {
|
|
|
|
$(this.canvas).remove();
|
2012-09-09 01:43:16 +04:00
|
|
|
|
2012-09-09 00:26:17 +04:00
|
|
|
var col = frame.getWidth(),
|
|
|
|
row = frame.getHeight();
|
2012-09-08 18:32:28 +04:00
|
|
|
|
2012-09-08 17:08:00 +04:00
|
|
|
var canvas = document.createElement("canvas");
|
|
|
|
|
2012-09-09 00:26:17 +04:00
|
|
|
var pixelWidth = col * this.dpi + this.gridStrokeWidth * (col - 1);
|
|
|
|
var pixelHeight = row * this.dpi + this.gridStrokeWidth * (row - 1);
|
|
|
|
canvas.setAttribute("width", pixelWidth);
|
|
|
|
canvas.setAttribute("height", pixelHeight);
|
2012-09-08 17:08:00 +04:00
|
|
|
var canvasClassname = "canvas";
|
|
|
|
if(this.className) {
|
|
|
|
canvasClassname += " " + this.className;
|
|
|
|
}
|
|
|
|
canvas.setAttribute("class", canvasClassname);
|
2012-09-09 00:26:17 +04:00
|
|
|
this.container.append(canvas);
|
2012-09-08 18:32:28 +04:00
|
|
|
|
2012-09-09 00:26:17 +04:00
|
|
|
if(this.gridStrokeWidth > 0) {
|
|
|
|
this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
|
|
|
|
}
|
2012-09-08 17:08:00 +04:00
|
|
|
|
2012-09-09 00:26:17 +04:00
|
|
|
|
2012-09-08 17:08:00 +04:00
|
|
|
this.canvas = canvas;
|
2012-09-08 18:32:28 +04:00
|
|
|
this.canvasConfigDirty = false;
|
2012-09-08 17:08:00 +04:00
|
|
|
}
|
2012-09-08 18:32:28 +04:00
|
|
|
return this.canvas;
|
2012-09-08 17:08:00 +04:00
|
|
|
};
|
2012-09-04 10:35:58 +04:00
|
|
|
})();
|