mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Dynamic DPIs !
This commit is contained in:
@ -17,24 +17,30 @@
|
||||
this.displayGrid = !!renderingOptions.displayGrid;
|
||||
this.dpi = renderingOptions.dpi;
|
||||
this.className = className;
|
||||
|
||||
// Flag to know if the config was altered
|
||||
this.canvasConfigDirty = true;
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.init = function (frame) {
|
||||
|
||||
this.createCanvas_(frame);
|
||||
this.render(frame);
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.updateDPI = function (newDPI) {
|
||||
this.dpi = newDPI;
|
||||
this.canvasConfigDirty = true;
|
||||
};
|
||||
|
||||
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, this.canvas, this.dpi);
|
||||
this.drawPixel(col, row, frame, this.getCanvas_(frame), this.dpi);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
|
||||
var context = this.canvas.getContext('2d');
|
||||
var context = this.getCanvas_(frame).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);
|
||||
@ -50,17 +56,19 @@
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.clear = function (col, row, frame) {
|
||||
this.canvas.getContext("2d").clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
var canvas = this.getCanvas_(frame)
|
||||
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.FrameRenderer.prototype.createCanvas_ = function (frame) {
|
||||
if(this.canvas == undefined) {
|
||||
ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
|
||||
if(this.canvasConfigDirty) {
|
||||
$(this.canvas).remove();
|
||||
var width = frame.getWidth(),
|
||||
height = frame.getHeight();
|
||||
|
||||
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.setAttribute("width", width * this.dpi);
|
||||
canvas.setAttribute("height", height * this.dpi);
|
||||
@ -72,7 +80,10 @@
|
||||
canvas.setAttribute("class", canvasClassname);
|
||||
|
||||
this.canvas = canvas;
|
||||
this.container.appendChild(this.canvas);
|
||||
|
||||
this.canvasConfigDirty = false;
|
||||
}
|
||||
this.container.appendChild(this.canvas);
|
||||
return this.canvas;
|
||||
};
|
||||
})();
|
Reference in New Issue
Block a user