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

Issue #414: part7: Support transparency for ZIP export

Browse Source 
Added renderFrameAt API to LayerUtils
Reuse LayerUtils and PiskelController renderFrameAt in PngExportController
This commit is contained in:
Julian Descottes 2016-03-10 00:19:39 +01:00 committed by juliandescottes
parent 7bf2662b66
commit 76a29bf51a
4 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,8 +60,8 @@
ns.PngExportController.prototype.mergedExport_ = function (zip) {
var paddingLength = ('' + this.piskelController.getFrameCount()).length;
for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
var frame = this.piskelController.getMergedFrameAt(i);
var canvas = this.getFrameAsCanvas_(frame);
var render = this.piskelController.renderFrameAt(i, true);
var canvas = pskl.utils.CanvasUtils.createFromImage(render);
var basename = this.pngFilePrefixInput.value;
var id = pskl.utils.StringUtils.leftPad(i, paddingLength, '0');
var filename = basename + id + '.png';
@ -77,8 +77,8 @@
var layer = this.piskelController.getLayerAt(j);
var layerid = pskl.utils.StringUtils.leftPad(j, layerPaddingLength, '0');
for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
var frame = layer.getFrameAt(i);
var canvas = this.getFrameAsCanvas_(frame);
var render = pskl.utils.LayerUtils.renderFrameAt(layer, i, true);
var canvas = pskl.utils.CanvasUtils.createFromImage(render);
var basename = this.pngFilePrefixInput.value;
var frameid = pskl.utils.StringUtils.leftPad(i + 1, framePaddingLength, '0');
var filename = 'l' + layerid + '_' + basename + frameid + '.png';
@ -87,12 +87,6 @@
}
};
ns.PngExportController.prototype.getFrameAsCanvas_ = function (frame) {
var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, 1);
canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
return canvasRenderer.render();
};
ns.PngExportController.prototype.getPiskelName_ = function () {
return this.piskelController.getPiskel().getDescriptor().name;
};

7
src/js/rendering/CanvasRenderer.js
View File

@ -4,6 +4,7 @@
ns.CanvasRenderer = function (frame, zoom) {
this.frame = frame;
this.zoom = zoom;
this.opacity_ = 1;
this.transparentColor_ = 'white';
};
@ -16,11 +17,15 @@
this.transparentColor_ = color;
};
ns.CanvasRenderer.prototype.setOpacity = function (opacity) {
this.opacity_ = opacity;
};
ns.CanvasRenderer.prototype.render = function () {
var canvas = this.createCanvas_();
// Draw in canvas
pskl.utils.FrameUtils.drawToCanvas(this.frame, canvas, this.transparentColor_);
pskl.utils.FrameUtils.drawToCanvas(this.frame, canvas, this.transparentColor_, this.opacity_);
var scaledCanvas = this.createCanvas_(this.zoom);
var scaledContext = scaledCanvas.getContext('2d');

17
src/js/utils/FrameUtils.js
View File

@ -9,22 +9,28 @@
* @param zoom {Number} zoom
* @return {Image}
*/
toImage : function (frame, zoom) {
toImage : function (frame, zoom, opacity) {
zoom = zoom || 1;
opacity = isNaN(opacity) ? 1 : opacity;
var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
canvasRenderer.setOpacity(opacity);
return canvasRenderer.render();
},
/**
* Draw the provided frame in a 2d canvas
*
* @param frame {pskl.model.Frame} frame the frame to draw
* @param canvas {Canvas} canvas the canvas target
* @param transparentColor {String} transparentColor (optional) color to use to represent transparent pixels.
* @param {Frame} frame the frame to draw
* @param {Canvas} canvas the canvas target
* @param {String} transparentColor (optional) color to use to represent transparent pixels.
* @param {String} opacity (optional) global frame opacity
*/
drawToCanvas : function (frame, canvas, transparentColor) {
drawToCanvas : function (frame, canvas, transparentColor, opacity) {
var context = canvas.getContext('2d');
opacity = isNaN(opacity) ? 1 : opacity;
context.globalAlpha = opacity;
transparentColor = transparentColor || Constants.TRANSPARENT_COLOR;
for (var x = 0, width = frame.getWidth() ; x < width ; x++) {
@ -46,6 +52,7 @@
y = y + w - 1;
}
}
context.globalAlpha = 1;
},
/**

14
src/js/utils/LayerUtils.js
View File

@ -42,17 +42,21 @@
return mergedLayer;
},
renderFrameAt : function (layer, index, preserveOpacity) {
var opacity = preserveOpacity ? layer.getOpacity() : 1;
var frame = layer.getFrameAt(index);
return pskl.utils.FrameUtils.toImage(frame, 1, opacity);
},
flattenFrameAt : function (layers, index, preserveOpacity) {
var width = layers[0].getFrameAt(index).getWidth();
var height = layers[0].getFrameAt(index).getHeight();
var canvas = pskl.utils.CanvasUtils.createCanvas(width, height);
var context = canvas.getContext('2d');
layers.forEach(function (l) {
var frameRender = pskl.utils.FrameUtils.toImage(l.getFrameAt(index));
if (preserveOpacity) {
context.globalAlpha = l.getOpacity();
}
context.drawImage(frameRender, 0, 0, width, height, 0, 0, width, height);
var render = ns.LayerUtils.renderFrameAt(l, index, preserveOpacity);
context.drawImage(render, 0, 0, width, height, 0, 0, width, height);
});
return canvas;