mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Encapsulate canvas element in FrameRenderer

Browse Source 
From this change set, the HTML canvas element, which is the frame view,
is encapsulated inside the FrameRenderer.
You won't need to give the view handle from the controller layer
anymore.
It will make view alteration implementations much easier (like grid for
instance)
This commit is contained in:
Vince
2012-09-08 15:08:00 +02:00
parent 9411b2e3ae
commit eb7511c721
5 changed files with 85 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
js/rendering/FrameRenderer.js
View File

@@ -2,25 +2,38 @@
var ns = $.namespace("pskl.rendering");
this.dpi = null;
this.canvas = null;
ns.FrameRenderer = function (container, dpi, className) {
if(container == undefined) {
throw "Bad FrameRenderer initialization. <container> undefined.";
}
ns.FrameRenderer = function (dpi) {
if(dpi == undefined || isNaN(dpi)) {
throw "Bad FrameRenderer initialization. <dpi> not well defined.";
}
this.container = container;
this.dpi = dpi;
this.className = className;
};
ns.FrameRenderer.prototype.render = function (frame, canvas) {
ns.FrameRenderer.prototype.init = function (frame) {
this.createCanvas_(frame);
this.render(frame);
};
ns.FrameRenderer.prototype.render = function (frame) {
for(var col = 0, width = frame.getWidth(); col < width; col++) {
for(var row = 0, height = frame.getHeight(); row < height; row++) {
this.drawPixel(col, row, frame, canvas, this.dpi);
this.drawPixel(col, row, frame, this.canvas, this.dpi);
}
}
};
ns.FrameRenderer.prototype.drawPixel = function (col, row, frame, canvas) {
var context = canvas.getContext('2d');
ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
var context = this.canvas.getContext('2d');
var color = frame.getPixel(col, row);
if(color == Constants.TRANSPARENT_COLOR) {
context.clearRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi);
@@ -34,4 +47,31 @@
context.fillRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi);
}
};
ns.FrameRenderer.prototype.clear = function (col, row, frame) {
this.canvas.getContext("2d").clearRect(0, 0, this.canvas.width, this.canvas.height);
};
/**
* @private
*/
ns.FrameRenderer.prototype.createCanvas_ = function (frame) {
if(this.canvas == undefined) {
var width = frame.getWidth(),
height = frame.getHeight();
var canvas = document.createElement("canvas");
canvas.setAttribute("width", width * this.dpi);
canvas.setAttribute("height", height * this.dpi);
var canvasClassname = "canvas";
if(this.className) {
canvasClassname += " " + this.className;
}
canvas.setAttribute("class", canvasClassname);
this.canvas = canvas;
}
this.container.appendChild(this.canvas);
};
})();