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

Added utilities for alpha-composition in FrameUtils, for future usage ... maybe

Browse Source
This commit is contained in:
jdescottes 2013-11-01 11:17:50 +01:00
parent 7490651f83
commit 3ce9aaa843
2 changed files with 115 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
js/rendering/FrameRenderer.js
View File

@ -10,9 +10,7 @@
ns.FrameRenderer = function (container, renderingOptions, classes) {
this.defaultRenderingOptions = {
'supportGridRendering' : false,
'zoom' : 1,
'xOffset' : 0,
'yOffset' : 0
'zoom' : 1
};
renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
@ -28,11 +26,12 @@
this.container = container;
this.zoom = renderingOptions.zoom;
this.xOffset = renderingOptions.xOffset;
this.yOffset = renderingOptions.yOffset;
this.pixelOffsetHeight = 0;
this.pixelOffsetWidth = 0;
this.frameOffsetX = 0;
this.frameOffsetY = 0;
this.marginY = 0;
this.marginX = 0;
this.supportGridRendering = renderingOptions.supportGridRendering;
@ -49,7 +48,7 @@
* Displayed canvas, scaled-up from the offdom canvas
* @type {HTMLElement}
*/
this.scaledCanvas = null;
this.displayCanvas = null;
this.setDisplaySize(renderingOptions.width, renderingOptions.height);
this.enableGrid(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID));
@ -69,23 +68,23 @@
ns.FrameRenderer.prototype.setDisplaySize = function (width, height) {
this.displayHeight = height;
this.displayWidth = width;
if (this.scaledCanvas) {
$(this.scaledCanvas).remove();
this.scaledCanvas = null;
if (this.displayCanvas) {
$(this.displayCanvas).remove();
this.displayCanvas = null;
}
};
ns.FrameRenderer.prototype.updatePixelOffsets_ = function () {
ns.FrameRenderer.prototype.updateMargins_ = function () {
if (!this.isAutoSized_()) {
var deltaH = this.displayHeight - (this.zoom * this.canvas.height);
this.pixelOffsetHeight = Math.max(0, deltaH) / 2;
var deltaX = this.displayWidth - (this.zoom * this.canvas.width);
this.marginX = Math.max(0, deltaX) / 2;
var deltaW = this.displayWidth - (this.zoom * this.canvas.width);
this.pixelOffsetWidth = Math.max(0, deltaW) / 2;
var deltaY = this.displayHeight - (this.zoom * this.canvas.height);
this.marginY = Math.max(0, deltaY) / 2;
}
};
ns.FrameRenderer.prototype.createScaledCanvas_ = function () {
ns.FrameRenderer.prototype.createDisplayCanvas_ = function () {
var height = this.displayHeight;
var width = this.displayWidth;
@ -94,16 +93,20 @@
width = this.zoom * this.canvas.width;
}
this.scaledCanvas = pskl.CanvasUtils.createCanvas(width, height, this.classes);
this.displayCanvas = pskl.CanvasUtils.createCanvas(width, height, this.classes);
if (true || this.zoom > 2) {
pskl.CanvasUtils.disableImageSmoothing(this.scaledCanvas);
pskl.CanvasUtils.disableImageSmoothing(this.displayCanvas);
}
this.container.append(this.scaledCanvas);
this.container.append(this.displayCanvas);
};
ns.FrameRenderer.prototype.setDisplayOffset = function (xOffset, yOffset) {
this.xOffset = xOffset;
this.yOffset = yOffset;
ns.FrameRenderer.prototype.setDisplayOffset = function (frameOffsetX, frameOffsetY) {
this.frameOffsetX = frameOffsetX;
this.frameOffsetY = frameOffsetY;
};
ns.FrameRenderer.prototype.moveOffset = function (frameOffsetX, frameOffsetY) {
this.setDisplayOffset(this.frameOffsetX + frameOffsetX, this.frameOffsetY + frameOffsetY);
};
/**
@ -138,14 +141,13 @@
ns.FrameRenderer.prototype.render = function (frame) {
if (frame) {
this.clear();
this.drawFrameInCanvas_(frame);
this.lastRenderedFrame = frame;
this.renderFrame_(frame);
}
};
ns.FrameRenderer.prototype.clear = function () {
pskl.CanvasUtils.clear(this.canvas);
pskl.CanvasUtils.clear(this.scaledCanvas);
pskl.CanvasUtils.clear(this.displayCanvas);
};
ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
@ -162,8 +164,8 @@
*/
ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) {
var cellSize = this.zoom + this.gridStrokeWidth;
var xCoord = (coords.x - this.pixelOffsetWidth) + (this.xOffset * cellSize),
yCoord = (coords.y - this.pixelOffsetHeight) + (this.yOffset * cellSize);
var xCoord = (coords.x - this.marginX) + (this.frameOffsetX * cellSize),
yCoord = (coords.y - this.marginY) + (this.frameOffsetY * cellSize);
return {
"col" : (xCoord - xCoord % cellSize) / cellSize,
"row" : (yCoord - yCoord % cellSize) / cellSize
@ -180,17 +182,11 @@
/**
* @private
*/
ns.FrameRenderer.prototype.drawFrameInCanvas_ = function (frame) {
ns.FrameRenderer.prototype.renderFrame_ = function (frame) {
if (!this.canvas) {
this.canvas = pskl.CanvasUtils.createCanvas(frame.getWidth(), frame.getHeight());
}
if (!this.scaledCanvas) {
this.createScaledCanvas_();
}
this.updatePixelOffsets_();
var context = this.canvas.getContext('2d');
for(var col = 0, width = frame.getWidth(); col < width; col++) {
for(var row = 0, height = frame.getHeight(); row < height; row++) {
@ -199,15 +195,21 @@
}
}
context = this.scaledCanvas.getContext('2d');
if (!this.displayCanvas) {
this.createDisplayCanvas_();
}
this.updateMargins_();
context = this.displayCanvas.getContext('2d');
context.save();
// zoom < 1
context.fillStyle = "#aaa";
// zoom < 1
context.fillRect(0,0,this.scaledCanvas.width, this.scaledCanvas.height);
context.translate(this.pixelOffsetWidth, this.pixelOffsetHeight);
context.fillRect(0,0,this.displayCanvas.width, this.displayCanvas.height);
context.translate(this.marginX, this.marginY);
context.scale(this.zoom, this.zoom);
context.translate(-this.xOffset, -this.yOffset);
context.translate(-this.frameOffsetX, -this.frameOffsetY);
// zoom < 1
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
context.drawImage(this.canvas, 0, 0);

77
js/utils/FrameUtils.js
View File

@ -1,11 +1,11 @@
(function () {
var ns = $.namespace('pskl.utils');
var colorCache = {};
ns.FrameUtils = {
merge : function (frames) {
var merged = null;
if (frames.length) {
merged = frames[0].clone();
merged = frames[0];
var w = merged.getWidth(), h = merged.getHeight();
for (var i = 1 ; i < frames.length ; i++) {
pskl.utils.FrameUtils.mergeFrames_(merged, frames[i]);
@ -20,6 +20,77 @@
frameA.setPixel(col, row, p);
}
});
},
/**
* Alpha compositing using porter duff algorithm :
* http://en.wikipedia.org/wiki/Alpha_compositing
* http://keithp.com/~keithp/porterduff/p253-porter.pdf
* @param {String} strColor1 color over
* @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);
if (typeof globalOpacity1 == 'number') {
col1 = JSON.parse(JSON.stringify(col1));
col1.a = globalOpacity1 * col1.a;
}
var a = col1.a + col2.a * (1 - col1.a);
var r = ((col1.r * col1.a + col2.r * col2.a * (1 - col1.a)) / a)|0;
var g = ((col1.g * col1.a + col2.g * col2.a * (1 - col1.a)) / a)|0;
var b = ((col1.b * col1.a + col2.b * col2.a * (1 - col1.a)) / a)|0;
return 'rgba('+r+','+g+','+b+','+a+')';
},
/**
* Convert a color defined as a string (hex, rgba, rgb, 'TRANSPARENT') to an Object with r,g,b,a properties.
* r, g and b are integers between 0 and 255, a is a float between 0 and 1
* @param {String} c color as a string
* @return {Object} {r:Number,g:Number,b:Number,a:Number}
*/
toRgba : function (c) {
if (colorCache[c]) {
return colorCache[c];
}
var color, matches;
if (c === 'TRANSPARENT') {
color = {
r : 0,
g : 0,
b : 0,
a : 0
};
} else if (c.indexOf('rgba(') != -1) {
matches = /rgba\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(1|0\.\d+)\s*\)/.exec(c);
color = {
r : parseInt(matches[1],10),
g : parseInt(matches[2],10),
b : parseInt(matches[3],10),
a : parseFloat(matches[4])
};
} else if (c.indexOf('rgb(') != -1) {
matches = /rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(c);
color = {
r : parseInt(matches[1],10),
g : parseInt(matches[2],10),
b : parseInt(matches[3],10),
a : 1
};
} else {
matches = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(c);
color = {
r : parseInt(matches[1], 16),
g : parseInt(matches[2], 16),
b : parseInt(matches[3], 16),
a : 1
};
}
colorCache[c] = color;
return color;
}
};
})();
})();