Merge branch 'master' into gh-pages

This commit is contained in:
juliandescottes 2012-09-20 14:56:45 +02:00
commit ac3bf894e5
9 changed files with 106 additions and 24 deletions

View File

@ -22,11 +22,15 @@
background-image: url(../img/actions/save.png);
}
.tool-icon.tool-export {
background-image: url(../img/actions/image-export.png);
background-position: 6px 3px;
}
.tool-icon.tool-add-frame {
background-image: url(../img/actions/add.png);
}
/*
* Tool icons:
*/

Binary file not shown.

After

Width:  |  Height:  |  Size: 909 B

View File

@ -26,6 +26,7 @@
<!-- TODO: Remove that from here or change CSS class naming since
they are framesheet level actions, not tools -->
<li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></li>
<li class="tool-icon tool-export" data-tool-id="tool-export" title="Export" onclick="piskel.exportToPNG()" rel="tooltip" data-placement="bottom" ></li>
<li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame" rel="tooltip" data-placement="bottom" ></li>
</ul>
</div>
@ -84,7 +85,8 @@
<!-- Libraries -->
<script src="js/utils/core.js"></script>
<script src="js/utils/pixelUtils.js"></script>
<script src="js/utils/PixelUtils.js"></script>
<script src="js/utils/CanvasUtils.js"></script>
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
<!-- Application libraries-->
@ -98,8 +100,9 @@
<script src="js/selection/ShapeSelection.js"></script>
<!-- Rendering -->
<script src="js/rendering/FrameRenderer.js"></script>
<script src="js/controller/DrawingController.js"></script>
<script src="js/rendering/SpritesheetRenderer.js"></script>
<!-- Controllers -->
<script src="js/controller/DrawingController.js"></script>
<script src="js/controller/PreviewFilmController.js"></script>
<script src="js/controller/AnimatedPreviewController.js"></script>
<script src="js/controller/ToolController.js"></script>

View File

@ -7,6 +7,14 @@
this.currentFrameIndex = 0;
};
ns.FrameSheet.prototype.getHeight = function () {
return this.height;
};
ns.FrameSheet.prototype.getWidth = function () {
return this.width;
};
ns.FrameSheet.prototype.addEmptyFrame = function () {
this.addFrame(ns.Frame.createEmpty(this.width, this.height));
};

View File

@ -163,6 +163,13 @@ $.namespace("pskl");
event.preventDefault();
}
return false;
},
/**
* Open new window with spritesheet as PNG
*/
exportToPNG : function () {
(new pskl.rendering.SpritesheetRenderer(frameSheet)).render();
}
};

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,24 +125,16 @@
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;
}

View File

@ -0,0 +1,57 @@
(function () {
var ns = $.namespace("pskl.rendering");
ns.SpritesheetRenderer = function (framesheet) {
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);
this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0);
}
this.openCanvasAsPNGInWindow_(canvas);
};
/**
* TODO : (Julz) Mutualize with code already present in FrameRenderer
*/
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);
}
}
}
};
ns.SpritesheetRenderer.prototype.createCanvas_ = function () {
var frameCount = this.framesheet.getFrameCount();
if (frameCount > 0){
var width = frameCount * this.framesheet.getWidth();
var height = this.framesheet.getHeight();
return pskl.CanvasUtils.createCanvas(width, height);
} else {
throw "Cannot render empty Spritesheet"
}
};
ns.SpritesheetRenderer.prototype.openCanvasAsPNGInWindow_ = function (canvas) {
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);
};
})();

22
js/utils/CanvasUtils.js Normal file
View File

@ -0,0 +1,22 @@
(function () {
var ns = $.namespace("pskl");
ns.CanvasUtils = {
createCanvas : function (width, height, classList) {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
if (typeof classList == "string") {
classList = [classList];
}
if (Array.isArray(classList)) {
for (var i = 0 ; i < classList.length ; i++) {
canvas.classList.add(classList[i]);
}
}
return canvas;
}
};
})();