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

Merge branch 'master' into enhancement-palette-sorting

Browse Source 
Conflicts:
	src/js/utils/FrameUtils.js
This commit is contained in:
jdescottes
2014-09-21 21:56:22 +02:00
parent 6445b44d02 9ef46d5ec5
commit 8a29b78af8
17 changed files with 289 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/js/utils/CanvasUtils.js
View File

@@ -1,13 +1,13 @@
(function () {
var ns = $.namespace("pskl");
var ns = $.namespace('pskl.utils');
ns.CanvasUtils = {
createCanvas : function (width, height, classList) {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
var canvas = document.createElement('canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
if (typeof classList == "string") {
if (typeof classList == 'string') {
classList = [classList];
}
if (Array.isArray(classList)) {
@@ -20,14 +20,14 @@
},
createFromImageData : function (imageData) {
var canvas = pskl.CanvasUtils.createCanvas(imageData.width, imageData.height);
var canvas = pskl.utils.CanvasUtils.createCanvas(imageData.width, imageData.height);
var context = canvas.getContext('2d');
context.putImageData(imageData, 0, 0);
return canvas;
},
createFromImage : function (image) {
var canvas = pskl.CanvasUtils.createCanvas(image.width, image.height);
var canvas = pskl.utils.CanvasUtils.createCanvas(image.width, image.height);
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
return canvas;
@@ -51,12 +51,12 @@
clear : function (canvas) {
if (canvas) {
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
}
},
clone : function (canvas) {
var clone = pskl.CanvasUtils.createCanvas(canvas.width, canvas.height);
var clone = pskl.utils.CanvasUtils.createCanvas(canvas.width, canvas.height);
//apply the old canvas to the new one
clone.getContext('2d').drawImage(canvas, 0, 0);
@@ -71,8 +71,8 @@
},
getBase64FromCanvas : function (canvas, format) {
format = format || "png";
var data = canvas.toDataURL("image/" + format);
format = format || 'png';
var data = canvas.toDataURL('image/' + format);
return data.substr(data.indexOf(',')+1);
}
};

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

@@ -2,6 +2,14 @@
var ns = $.namespace('pskl.utils');
var colorCache = {};
ns.FrameUtils = {
toImage : function (frame, zoom, bgColor) {
zoom = zoom || 1;
bgColor = bgColor || Constants.TRANSPARENT_COLOR;
var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
canvasRenderer.drawTransparentAs(bgColor);
return canvasRenderer.render();
},
merge : function (frames) {
var merged = null;
if (frames.length) {
@@ -28,6 +36,66 @@
return pskl.utils.FrameUtils.createFromImage(resizedImage);
},
/*
* Create a pskl.model.Frame from an Image object.
* Transparent pixels will either be converted to completely opaque or completely transparent pixels.
* @param {Image} image source image
* @return {pskl.model.Frame} corresponding frame
*/
createFromImage : function (image) {
var w = image.width,
h = image.height;
var canvas = pskl.utils.CanvasUtils.createCanvas(w, h);
var context = canvas.getContext('2d');
context.drawImage(image, 0,0,w,h,0,0,w,h);
var imgData = context.getImageData(0,0,w,h).data;
return pskl.utils.FrameUtils.createFromImageData_(imgData, w, h);
},
createFromImageData_ : function (imageData, width, height) {
// Draw the zoomed-up pixels to a different canvas context
var grid = [];
for (var x = 0 ; x < width ; x++){
grid[x] = [];
for (var y = 0 ; y < height ; y++){
// Find the starting index in the one-dimensional image data
var i = (y * width + x)*4;
var r = imageData[i ];
var g = imageData[i+1];
var b = imageData[i+2];
var a = imageData[i+3];
if (a < 125) {
grid[x][y] = Constants.TRANSPARENT_COLOR;
} else {
grid[x][y] = pskl.utils.FrameUtils.rgbToHex_(r,g,b);
}
}
}
return pskl.model.Frame.fromPixelGrid(grid);
},
/**
* Convert a rgb(Number, Number, Number) color to hexadecimal representation
* @param {Number} r red value, between 0 and 255
* @param {Number} g green value, between 0 and 255
* @param {Number} b blue value, between 0 and 255
* @return {String} hex representation of the color '#ABCDEF'
*/
rgbToHex_ : function (r, g, b) {
return "#" + this.componentToHex_(r) + this.componentToHex_(g) + this.componentToHex_(b);
},
/**
* Convert a color component (as a Number between 0 and 255) to its string hexa representation
* @param {Number} c component value, between 0 and 255
* @return {String} eg. '0A'
*/
componentToHex_ : function (c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
},
/**
* Alpha compositing using porter duff algorithm :
* http://en.wikipedia.org/wiki/Alpha_compositing
@@ -36,9 +104,9 @@
* @param {String} strColor2 color under
* @return {String} the composite color
*/
mergePixels : function (strColor1, strColor2, globalOpacity1) {
var col1 = pskl.utils.FrameUtils.toRgba(strColor1);
var col2 = pskl.utils.FrameUtils.toRgba(strColor2);
mergePixels_ : function (strColor1, strColor2, globalOpacity1) {
var col1 = pskl.utils.FrameUtils.toRgba_(strColor1);
var col2 = pskl.utils.FrameUtils.toRgba_(strColor2);
if (typeof globalOpacity1 == 'number') {
col1 = JSON.parse(JSON.stringify(col1));
col1.a = globalOpacity1 * col1.a;
@@ -58,7 +126,7 @@
* @param {String} c color as a string
* @return {Object} {r:Number,g:Number,b:Number,a:Number}
*/
toRgba : function (c) {
toRgba_ : function (c) {
if (colorCache[c]) {
return colorCache[c];
}
@@ -97,81 +165,6 @@
}
colorCache[c] = color;
return color;
},
/*
* Create a pskl.model.Frame from an Image object.
* Transparent pixels will either be converted to completely opaque or completely transparent pixels.
* @param {Image} image source image
* @return {pskl.model.Frame} corresponding frame
*/
createFromImage : function (image) {
var w = image.width,
h = image.height;
var imgData = pskl.utils.FrameUtils.imageToImageData(image);
var grid = pskl.utils.FrameUtils.imageDataToGrid(imgData,w, h, Constants.TRANSPARENT_COLOR);
return pskl.model.Frame.fromGrid(grid);
},
imageToImageData : function (image) {
var w = image.width,
h = image.height;
var canvas = pskl.CanvasUtils.createCanvas(w, h);
var context = canvas.getContext('2d');
context.drawImage(image, 0,0,w,h,0,0,w,h);
return context.getImageData(0,0,w,h).data;
},
imageDataToGrid : function (imageData, width, height, transparent) {
// Draw the zoomed-up pixels to a different canvas context
var grid = [];
for (var x = 0 ; x < width ; x++){
grid[x] = [];
for (var y = 0 ; y < height ; y++){
// Find the starting index in the one-dimensional image data
var i = (y * width + x)*4;
var r = imageData[i ];
var g = imageData[i+1];
var b = imageData[i+2];
var a = imageData[i+3];
if (a < 125) {
grid[x][y] = transparent;
} else {
grid[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b);
}
}
}
return grid;
},
/**
* Convert a rgb(Number, Number, Number) color to hexadecimal representation
* @param {Number} r red value, between 0 and 255
* @param {Number} g green value, between 0 and 255
* @param {Number} b blue value, between 0 and 255
* @return {String} hex representation of the color '#ABCDEF'
*/
rgbToHex : function (r, g, b) {
return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
},
/**
* Convert a color component (as a Number between 0 and 255) to its string hexa representation
* @param {Number} c component value, between 0 and 255
* @return {String} eg. '0A'
*/
componentToHex : function (c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
},
toImage : function (frame, zoom, bgColor) {
zoom = zoom || 1;
bgColor = bgColor || Constants.TRANSPARENT_COLOR;
var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
canvasRenderer.drawTransparentAs(bgColor);
return canvasRenderer.render();
}
};
})();

8
src/js/utils/ImageResizer.js
View File

@@ -3,12 +3,12 @@
ns.ImageResizer = {
resize : function (image, targetWidth, targetHeight, smoothingEnabled) {
var canvas = pskl.CanvasUtils.createCanvas(targetWidth, targetHeight);
var canvas = pskl.utils.CanvasUtils.createCanvas(targetWidth, targetHeight);
var context = canvas.getContext('2d');
context.save();
if (!smoothingEnabled) {
pskl.CanvasUtils.disableImageSmoothing(canvas);
pskl.utils.CanvasUtils.disableImageSmoothing(canvas);
}
context.translate(canvas.width / 2, canvas.height / 2);
@@ -34,10 +34,10 @@
*/
resizeNearestNeighbour : function (source, zoom, margin, marginColor) {
margin = margin || 0;
var canvas = pskl.CanvasUtils.createCanvas(zoom*source.width, zoom*source.height);
var canvas = pskl.utils.CanvasUtils.createCanvas(zoom*source.width, zoom*source.height);
var context = canvas.getContext('2d');
var imgData = pskl.CanvasUtils.getImageDataFromCanvas(source);
var imgData = pskl.utils.CanvasUtils.getImageDataFromCanvas(source);
var yRanges = {},
xOffset = 0,

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

@@ -8,20 +8,20 @@
* @param {Image} image source image
* @return {pskl.model.Frame} corresponding frame
*/
createFromImage : function (image, frameCount) {
var w = image.width,
h = image.height,
frameWidth = w / frameCount;
createLayerFromSpritesheet : function (image, frameCount) {
var width = image.width,
height = image.height,
frameWidth = width / frameCount;
var canvas = pskl.CanvasUtils.createCanvas(w, h);
var canvas = pskl.utils.CanvasUtils.createCanvas(frameWidth, height);
var context = canvas.getContext('2d');
context.drawImage(image, 0,0,w,h,0,0,w,h);
// Draw the zoomed-up pixels to a different canvas context
var frames = [];
for (var i = 0 ; i < frameCount ; i++) {
var imgData = context.getImageData(frameWidth*i,0,frameWidth,h).data;
var frame = pskl.utils.FrameUtils.createFromImageData(imgData, frameWidth, h);
context.clearRect(0, 0 , frameWidth, height);
context.drawImage(image, frameWidth * i, 0, frameWidth, height, 0, 0, frameWidth, height);
var frame = pskl.utils.FrameUtils.createFromImage(canvas);
frames.push(frame);
}
return frames;

2
src/js/utils/serialization/Deserializer.js
View File

@@ -47,7 +47,7 @@
// 2 - attach the onload callback that will be triggered asynchronously
image.onload = function () {
// 5 - extract the frames from the loaded image
var frames = pskl.utils.LayerUtils.createFromImage(image, layerData.frameCount);
var frames = pskl.utils.LayerUtils.createLayerFromSpritesheet(image, layerData.frameCount);
// 6 - add each image to the layer
this.addFramesToLayer(frames, layer);
}.bind(this);