wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #63 from juliandescottes/fix-overlayrendering

Browse source 
Cleaned FrameRenderer.js
This commit is contained in:
Julian Descottes 2012-09-08 17:36:16 -07:00
commit 9484837a32
3 changed files with 30 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
js/controller/DrawingController.js
View file

@ -206,13 +206,11 @@
this.renderer.updateDPI(newDPI);
this.overlayRenderer.updateDPI(newDPI);
this.renderer.render(this.frame);
this.overlayRenderer.render(this.overlayFrame);
this.render();
};
ns.DrawingController.prototype.render = function () {
try {
this.renderFrame();
this.renderOverlay();
} catch (e) {
@ -236,12 +234,11 @@
var serializedOverlay = this.overlayFrame.serialize();
if (this.serializedOverlay != serializedOverlay) {
this.serializedOverlay = serializedOverlay
this.renderer.render(this.overlayFrame);
this.overlayRenderer.render(this.overlayFrame);
}
};
ns.DrawingController.prototype.clearOverlay = function () {
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(this.frame);
this.overlayRenderer.clear();
};
})();

3
js/drawingtools/Stroke.js
View file

@ -35,7 +35,6 @@
// The fake canvas where we will draw the preview of the stroke:
// Drawing the first point of the stroke in the fake overlay canvas:
drawer.overlayFrame.setPixel(col, row, color);
drawer.renderOverlay();
};
ns.Stroke.prototype.moveToolAt = function(col, row, color, drawer) {
@ -59,7 +58,6 @@
}
drawer.overlayFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
}
drawer.renderOverlay();
};
/**
@ -78,7 +76,6 @@
}
// Draw in canvas:
// TODO: Remove that when we have the centralized redraw loop
drawer.renderFrame();
}
// For now, we are done with the stroke tool and don't need an overlay anymore:
drawer.clearOverlay();

68
js/rendering/FrameRenderer.js
View file

@ -58,33 +58,42 @@
};
ns.FrameRenderer.prototype.render = function (frame) {
this.clear(frame);
var context = this.getCanvas_(frame).getContext('2d');
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, this.getCanvas_(frame, col, row), this.dpi);
var color = frame.getPixel(col, row);
this.renderPixel_(color, col, row, context);
}
}
this.lastRenderedFrame = frame;
};
ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
var context = this.getCanvas_(frame, col, row).getContext('2d');
var context = this.getCanvas_(frame).getContext('2d');
var color = frame.getPixel(col, row);
if(color == Constants.TRANSPARENT_COLOR) {
context.clearRect(this.getFrameY_(col), this.getFrameY_(row), this.dpi, this.dpi);
}
else {
if(color != Constants.SELECTION_TRANSPARENT_COLOR) {
// TODO(vincz): Found a better design to update the palette, it's called too frequently.
$.publish(Events.COLOR_USED, [color]);
}
context.fillStyle = color;
context.fillRect(this.getFrameY_(col), this.getFrameY_(row), this.dpi, this.dpi);
context.clearRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);
} else {
this.renderPixel_(color, col, row, context);
}
this.lastRenderedFrame = frame;
};
ns.FrameRenderer.prototype.clear = function (col, row, frame) {
var canvas = this.getCanvas_(frame, col, row)
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);
}
if(color != Constants.SELECTION_TRANSPARENT_COLOR) {
// TODO(vincz): Found a better design to update the palette, it's called too frequently.
$.publish(Events.COLOR_USED, [color]);
}
};
ns.FrameRenderer.prototype.clear = function (frame) {
var canvas = this.getCanvas_(frame);
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
};
@ -104,15 +113,8 @@
/**
* @private
*/
ns.FrameRenderer.prototype.getFrameX_ = function(col) {
return col * this.dpi + ((col - 1) * this.gridStrokeWidth);
};
/**
* @private
*/
ns.FrameRenderer.prototype.getFrameY_ = function(row) {
return row * this.dpi + ((row - 1) * this.gridStrokeWidth);
ns.FrameRenderer.prototype.getFramePos_ = function(index) {
return index * this.dpi + ((index - 1) * this.gridStrokeWidth);
};
/**
@ -123,14 +125,14 @@
ctx.lineWidth = Constants.GRID_STROKE_WIDTH;
ctx.strokeStyle = Constants.GRID_STROKE_COLOR;
for(var c=1; c < col; c++) {
ctx.moveTo(this.getFrameX_(c), 0);
ctx.lineTo(this.getFrameX_(c), height);
ctx.moveTo(this.getFramePos_(c), 0);
ctx.lineTo(this.getFramePos_(c), height);
ctx.stroke();
}
for(var r=1; r < row; r++) {
ctx.moveTo(0, this.getFrameY_(r));
ctx.lineTo(width, this.getFrameY_(r));
ctx.moveTo(0, this.getFramePos_(r));
ctx.lineTo(width, this.getFramePos_(r));
ctx.stroke();
}
};
@ -168,18 +170,4 @@
}
return this.canvas;
};
/**
* @private
*/
ns.FrameRenderer.prototype.createCanvasForFrame_ = function (frame) {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", frame.getWidth() * this.dpi);
canvas.setAttribute("height", frame.getHeight() * this.dpi);
canvas.classList.add("canvas");
if(this.className) canvas.classList.add(this.className);
return canvas;
};
})();