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

Basic export - opening new window with concatenated spritesheet in PNG format

Browse Source
This commit is contained in:
juliandescottes
2012-09-20 00:43:39 +02:00
parent 0f0938b91b
commit 562d669ae1
8 changed files with 103 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
js/rendering/FrameRenderer.js
View File

@ -63,17 +63,6 @@
this.lastRenderedFrame = frame;
};
ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
var context = this.getCanvas_(frame).getContext('2d');
var color = frame.getPixel(col, row);
if(color == Constants.TRANSPARENT_COLOR) {
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.renderPixel_ = function (color, col, row, context) {
if(color != Constants.TRANSPARENT_COLOR) {
context.fillStyle = color;
@ -136,23 +125,15 @@
var col = frame.getWidth(),
row = frame.getHeight();
var canvas = document.createElement("canvas");
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);
var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, ["canvas", this.className]);
this.container.append(canvas);
if(this.gridStrokeWidth > 0) {
this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
}
this.canvas = canvas;
this.canvasConfigDirty = false;

54
js/rendering/SpritesheetRenderer.js Normal file
View File

@ -0,0 +1,54 @@
(function () {
var ns = $.namespace("pskl.rendering");
ns.SpritesheetRenderer = function (framesheet, renderingOptions) {
this.framesheet = framesheet;
};
/**
* Will open a new window displaying the spritesheet as a png
*/
ns.SpritesheetRenderer.prototype.render = function () {
var canvas = this.createCanvas_();
for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) {
var frame = this.framesheet.getFrameByIndex(i);
var offsetWidth = i * this.framesheet.getWidth();
var offsetHeight = 0;
this.drawFrameInCanvas_(frame, canvas, offsetWidth, offsetHeight);
}
var options = [
"dialog=yes", "scrollbars=no", "status=no",
"width=" + this.framesheet.getWidth() * this.framesheet.getFrameCount(),
"height="+this.framesheet.getHeight()
].join(",");
window.open(canvas.toDataURL("image/png"), "piskel-export", options);
};
ns.SpritesheetRenderer.prototype.createCanvas_ = function () {
var frameCount = this.framesheet.getFrameCount();
if (frameCount > 0){
var width = frameCount * this.framesheet.getWidth();
var height = this.framesheet.getHeight();
var canvas = pskl.CanvasUtils.createCanvas(width, height);
return canvas;
} else {
throw "Cannot render empty Spritesheet"
}
};
ns.SpritesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
var context = 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);
if(color != Constants.TRANSPARENT_COLOR) {
context.fillStyle = color;
context.fillRect(col + offsetWidth, row + offsetHeight, 1, 1);
}
}
}
}
})();