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

Zip-Export: Split by layers option

Browse Source
This commit is contained in:
Max Eden 2015-04-29 20:20:35 +06:00
parent ce8d71f47e
commit 016316518d
2 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/js/controller/settings/exportimage/PngExportController.js
View File

@ -13,6 +13,8 @@
this.pngFilePrefixInput = document.getElementById('zip-prefix-name'); this.pngFilePrefixInput = document.getElementById('zip-prefix-name');
this.pngFilePrefixInput.value = 'sprite_'; this.pngFilePrefixInput.value = 'sprite_';
this.splitByLayersCheckbox = document.getElementById('zip-split-by-layers');
var downloadButton = document.querySelector('.png-download-button'); var downloadButton = document.querySelector('.png-download-button');
this.addEventListener(downloadButton, 'click', this.onPngDownloadButtonClick_); this.addEventListener(downloadButton, 'click', this.onPngDownloadButtonClick_);
@ -30,12 +32,34 @@
ns.PngExportController.prototype.onZipButtonClick_ = function () { ns.PngExportController.prototype.onZipButtonClick_ = function () {
var zip = new window.JSZip(); var zip = new window.JSZip();
for (var i = 0 ; i < this.piskelController.getFrameCount() ; i++) { function splittedExport() {
var frame = this.piskelController.getFrameAt(i); var layers = this.piskelController.getLayers();
var canvas = this.getFrameAsCanvas_(frame); for (var j = 0; this.piskelController.hasLayerAt(j); j++) {
var basename = this.pngFilePrefixInput.value; var layer = this.piskelController.getLayerAt(j);
var filename = basename + (i + 1) + '.png'; for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true}); var frame = layer.getFrameAt(i);
var canvas = this.getFrameAsCanvas_(frame);
var basename = this.pngFilePrefixInput.value;
var filename = 'l' + j + '_' + basename + (i + 1) + '.png';
zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
}
}
}
function mergedExport() {
for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
var frame = this.piskelController.getFrameAt(i);
var canvas = this.getFrameAsCanvas_(frame);
var basename = this.pngFilePrefixInput.value;
var filename = basename + (i + 1) + '.png';
zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
}
}
if (this.splitByLayersCheckbox.checked) {
splittedExport.call(this);
} else {
mergedExport.call(this);
} }
var fileName = this.getPiskelName_() + '.zip'; var fileName = this.getPiskelName_() + '.zip';

6
src/templates/settings/export.html
View File

@ -15,6 +15,12 @@
<div class="settings-item"> <div class="settings-item">
<label for="zip-prefix-name">Prefix:</label> <label for="zip-prefix-name">Prefix:</label>
<input id="zip-prefix-name" type="text" class="textfield" placeholder="PNG file prefix ..."> <input id="zip-prefix-name" type="text" class="textfield" placeholder="PNG file prefix ...">
</div>
<div class="settings-item">
<label>
<input id="zip-split-by-layers" type="checkbox" />
Split by layers
</label>
</div> </div>
<button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button> <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
</div> </div>