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

Piskel website adaptations :

Browse Source 
M CanvasRenderer : can set the color used to represent transparency
M app.js : modified code responsible for saving when in website mode
M PiskelController.js : just some argument renaming
This commit is contained in:
jdescottes 2013-10-08 23:44:06 +02:00
parent 913a50cb28
commit 564f74265a
3 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/app.js
View File

@ -180,7 +180,11 @@
formData.append('frames', this.piskelController.getFrameCount()); formData.append('frames', this.piskelController.getFrameCount());
// Get image/png data for first frame // Get image/png data for first frame
formData.append('preview', this.getFirstFrameAsPNGData_()); var firstFrame = this.piskelController.getFrameAt(0);
var frameRenderer = new pskl.rendering.CanvasRenderer(firstFrame, 1);
frameRenderer.drawTransparentAs('rgba(0,0,0,0)');
var firstFrameCanvas = frameRenderer.render().canvas;
formData.append('preview', firstFrameCanvas.toDataURL("image/png"));
var imageData = (new pskl.rendering.SpritesheetRenderer(this.piskelController)).renderAsImageDataSpritesheetPNG(); var imageData = (new pskl.rendering.SpritesheetRenderer(this.piskelController)).renderAsImageDataSpritesheetPNG();
formData.append('framesheet', imageData); formData.append('framesheet', imageData);

8
js/controller/PiskelController.js
View File

@ -184,9 +184,13 @@
return pskl.utils.Serializer.serializePiskel(this.piskel); return pskl.utils.Serializer.serializePiskel(this.piskel);
}; };
ns.PiskelController.prototype.deserialize = function (json) { ns.PiskelController.prototype.load = function (data) {
this.deserialize(JSON.stringify(data));
};
ns.PiskelController.prototype.deserialize = function (jsonStr) {
try { try {
var piskel = pskl.utils.Serializer.deserializePiskel(json); var piskel = pskl.utils.Serializer.deserializePiskel(jsonStr);
this.setPiskel(piskel); this.setPiskel(piskel);
} catch (e) { } catch (e) {
console.error('Failed to deserialize'); console.error('Failed to deserialize');

19
js/rendering/CanvasRenderer.js
View File

@ -4,9 +4,19 @@
ns.CanvasRenderer = function (frame, dpi) { ns.CanvasRenderer = function (frame, dpi) {
this.frame = frame; this.frame = frame;
this.dpi = dpi; this.dpi = dpi;
this.transparentColor_ = 'white';
}; };
ns.CanvasRenderer.prototype.render = function (frame, dpi) { /**
* Decide which color should be used to represent transparent pixels
* Default : white
* @param {String} color the color to use either as '#ABCDEF' or 'red' or 'rgb(x,y,z)' or 'rgba(x,y,z,a)'
*/
ns.CanvasRenderer.prototype.drawTransparentAs = function (color) {
this.transparentColor_ = color;
};
ns.CanvasRenderer.prototype.render = function () {
var canvas = this.createCanvas_(); var canvas = this.createCanvas_();
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
for(var col = 0, width = this.frame.getWidth(); col < width; col++) { for(var col = 0, width = this.frame.getWidth(); col < width; col++) {
@ -20,11 +30,12 @@
}; };
ns.CanvasRenderer.prototype.renderPixel_ = function (color, col, row, context) { ns.CanvasRenderer.prototype.renderPixel_ = function (color, col, row, context) {
if(color == Constants.TRANSPARENT_COLOR) {
color = "#FFF";
}
if(color == Constants.TRANSPARENT_COLOR) {
color = this.transparentColor_;
}
context.fillStyle = color; context.fillStyle = color;
context.fillRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi); context.fillRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi);
}; };