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

Adding grid

Browse Source
This commit is contained in:
Vince 2012-09-08 22:26:17 +02:00
parent 2cda69b000
commit 82da78abf1
3 changed files with 82 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/controller/DrawingController.js
View File

@ -54,6 +54,7 @@
// Deactivate right click:
this.container.contextmenu(this.onCanvasContextMenu_);
//this.container.contextmenu(this.onCanvasContextMenu_);
};
/**

2
js/piskel.js
View File

@ -105,7 +105,7 @@ $.namespace("pskl");
* @private
*/
calculateDPIsForDrawingCanvas_ : function() {
var availableViewportHeight = $('.main-panel').height();
var availableViewportHeight = $('.main-panel').height() - 50;
return Math.floor(availableViewportHeight / framePixelHeight);
},

93
js/rendering/FrameRenderer.js
View File

@ -1,22 +1,30 @@
(function () {
var ns = $.namespace("pskl.rendering");
this.dpi = null;
this.canvas = null;
ns.FrameRenderer = function (container, renderingOptions, className) {
this.defaultRenderingOptions = {
"gridStrokeWidth" : 0,
"gridStrokeColor" : "lightgray"
};
renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
if(container == undefined) {
throw "Bad FrameRenderer initialization. <container> undefined.";
}
this.container = container;
if(renderingOptions == undefined || renderingOptions.dpi == undefined || isNaN(dpi)) {
if(isNaN(renderingOptions.dpi)) {
throw "Bad FrameRenderer initialization. <dpi> not well defined.";
}
this.displayGrid = !!renderingOptions.displayGrid;
this.container = container;
this.dpi = renderingOptions.dpi;
this.className = className;
this.canvas = null;
console.log(renderingOptions)
this.gridStrokeWidth = renderingOptions.gridStrokeWidth;
this.gridStrokeColor = renderingOptions.gridStrokeColor;
// Flag to know if the config was altered
this.canvasConfigDirty = true;
@ -34,16 +42,16 @@
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.getCanvas_(frame), this.dpi);
this.drawPixel(col, row, frame, this.getCanvas_(frame, col, row), this.dpi);
}
}
};
ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
var context = this.getCanvas_(frame).getContext('2d');
var context = this.getCanvas_(frame, col, row).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);
context.clearRect(this.getFrameY_(col), this.getFrameY_(row), this.dpi, this.dpi);
}
else {
if(color != Constants.SELECTION_TRANSPARENT_COLOR) {
@ -51,37 +59,90 @@
$.publish(Events.COLOR_USED, [color]);
}
context.fillStyle = color;
context.fillRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi);
context.fillRect(this.getFrameY_(col), this.getFrameY_(row), this.dpi, this.dpi);
}
};
ns.FrameRenderer.prototype.clear = function (col, row, frame) {
var canvas = this.getCanvas_(frame)
var canvas = this.getCanvas_(frame, col, row)
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
};
/**
* 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
*/
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);
};
/**
* @private
*/
ns.FrameRenderer.prototype.drawGrid_ = function(canvas, width, height, col, row) {
var ctx = canvas.getContext("2d");
ctx.lineWidth = this.gridStrokeWidth;
ctx.strokeStyle = this.gridStrokeColor;
for(var c=1; c < col; c++) {
ctx.moveTo(this.getFrameX_(c), 0);
ctx.lineTo(this.getFrameX_(c), height);
ctx.stroke();
}
for(var r=1; r < row; r++) {
ctx.moveTo(0, this.getFrameY_(r));
ctx.lineTo(width, this.getFrameY_(r));
ctx.stroke();
}
};
/**
* @private
*/
ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
if(this.canvasConfigDirty) {
$(this.canvas).remove();
var width = frame.getWidth(),
height = frame.getHeight();
var col = frame.getWidth(),
row = frame.getHeight();
var canvas = document.createElement("canvas");
canvas.setAttribute("width", width * this.dpi);
canvas.setAttribute("height", height * this.dpi);
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);
var canvasClassname = "canvas";
if(this.className) {
canvasClassname += " " + this.className;
}
canvas.setAttribute("class", canvasClassname);
this.container.append(canvas);
if(this.gridStrokeWidth > 0) {
this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
}
this.canvas = canvas;
this.container.append(this.canvas);
this.canvasConfigDirty = false;
}
return this.canvas;