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

Zoom initial implementation. No UI, only bound to mousewheel. Everything is broken, to amend !

Browse Source
This commit is contained in:
jdescottes
2013-10-29 22:16:39 +01:00
parent a69b83e9bd
commit 7490651f83
6 changed files with 219 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
js/rendering/FrameRenderer.js
View File

@ -9,46 +9,107 @@
*/
ns.FrameRenderer = function (container, renderingOptions, classes) {
this.defaultRenderingOptions = {
'supportGridRendering' : false
'supportGridRendering' : false,
'zoom' : 1,
'xOffset' : 0,
'yOffset' : 0
};
renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
if(container === undefined) {
throw 'Bad FrameRenderer initialization. <container> undefined.';
}
if(isNaN(renderingOptions.dpi)) {
throw 'Bad FrameRenderer initialization. <dpi> not well defined.';
if(isNaN(renderingOptions.zoom)) {
throw 'Bad FrameRenderer initialization. <zoom> not well defined.';
}
this.container = container;
this.dpi = renderingOptions.dpi;
this.zoom = renderingOptions.zoom;
this.xOffset = renderingOptions.xOffset;
this.yOffset = renderingOptions.yOffset;
this.pixelOffsetHeight = 0;
this.pixelOffsetWidth = 0;
this.supportGridRendering = renderingOptions.supportGridRendering;
this.classes = classes || [];
this.classes.push('canvas');
/**
* Off dom canvas, will be used to draw the frame at 1:1 ratio
* @type {HTMLElement}
*/
this.canvas = null;
/**
* Displayed canvas, scaled-up from the offdom canvas
* @type {HTMLElement}
*/
this.scaledCanvas = null;
this.setDisplaySize(renderingOptions.width, renderingOptions.height);
this.enableGrid(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID));
// Flag to know if the config was altered
this.canvasConfigDirty = true;
this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
};
ns.FrameRenderer.prototype.setDPI = function (dpi) {
this.dpi = dpi;
this.canvasConfigDirty = true;
ns.FrameRenderer.prototype.setZoom = function (zoom) {
this.zoom = zoom;
};
ns.FrameRenderer.prototype.isAutoSized_ = function () {
return this.displayHeight === 'auto' && this.displayWidth === 'auto';
};
ns.FrameRenderer.prototype.setDisplaySize = function (width, height) {
this.displayHeight = height;
this.displayWidth = width;
if (this.scaledCanvas) {
$(this.scaledCanvas).remove();
this.scaledCanvas = null;
}
};
ns.FrameRenderer.prototype.updatePixelOffsets_ = function () {
if (!this.isAutoSized_()) {
var deltaH = this.displayHeight - (this.zoom * this.canvas.height);
this.pixelOffsetHeight = Math.max(0, deltaH) / 2;
var deltaW = this.displayWidth - (this.zoom * this.canvas.width);
this.pixelOffsetWidth = Math.max(0, deltaW) / 2;
}
};
ns.FrameRenderer.prototype.createScaledCanvas_ = function () {
var height = this.displayHeight;
var width = this.displayWidth;
if (this.isAutoSized_()) {
height = this.zoom * this.canvas.height;
width = this.zoom * this.canvas.width;
}
this.scaledCanvas = pskl.CanvasUtils.createCanvas(width, height, this.classes);
if (true || this.zoom > 2) {
pskl.CanvasUtils.disableImageSmoothing(this.scaledCanvas);
}
this.container.append(this.scaledCanvas);
};
ns.FrameRenderer.prototype.setDisplayOffset = function (xOffset, yOffset) {
this.xOffset = xOffset;
this.yOffset = yOffset;
};
/**
* @private
*/
ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
if(settingName == pskl.UserSettings.SHOW_GRID) {
this.enableGrid(settingValue);
}
@ -77,27 +138,20 @@
ns.FrameRenderer.prototype.render = function (frame) {
if (frame) {
this.clear();
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++) {
var color = frame.getPixel(col, row);
this.renderPixel_(color, col, row, context);
}
}
this.drawFrameInCanvas_(frame);
this.lastRenderedFrame = frame;
}
};
ns.FrameRenderer.prototype.clear = function () {
pskl.CanvasUtils.clear(this.canvas);
pskl.CanvasUtils.clear(this.scaledCanvas);
};
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 () {
if (this.canvas) {
this.canvas.getContext("2d").clearRect(0, 0, this.canvas.width, this.canvas.height);
context.fillRect(col, row, 1, 1);
}
};
@ -107,10 +161,12 @@
* @public
*/
ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) {
var cellSize = this.dpi + this.gridStrokeWidth;
var cellSize = this.zoom + this.gridStrokeWidth;
var xCoord = (coords.x - this.pixelOffsetWidth) + (this.xOffset * cellSize),
yCoord = (coords.y - this.pixelOffsetHeight) + (this.yOffset * cellSize);
return {
"col" : (coords.x - coords.x % cellSize) / cellSize,
"row" : (coords.y - coords.y % cellSize) / cellSize
"col" : (xCoord - xCoord % cellSize) / cellSize,
"row" : (yCoord - yCoord % cellSize) / cellSize
};
};
@ -124,22 +180,37 @@
/**
* @private
*/
ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
if(this.canvasConfigDirty) {
$(this.canvas).remove();
var col = frame.getWidth(),
row = frame.getHeight();
var pixelWidth = col * this.dpi + this.gridStrokeWidth * (col - 1);
var pixelHeight = row * this.dpi + this.gridStrokeWidth * (row - 1);
var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, this.classes);
this.container.append(canvas);
this.canvas = canvas;
this.canvasConfigDirty = false;
ns.FrameRenderer.prototype.drawFrameInCanvas_ = function (frame) {
if (!this.canvas) {
this.canvas = pskl.CanvasUtils.createCanvas(frame.getWidth(), frame.getHeight());
}
return this.canvas;
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++) {
var color = frame.getPixel(col, row);
this.renderPixel_(color, col, row, context);
}
}
context = this.scaledCanvas.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.scale(this.zoom, this.zoom);
context.translate(-this.xOffset, -this.yOffset);
// zoom < 1
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
context.drawImage(this.canvas, 0, 0);
context.restore();
};
})();