scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-06 04:42:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

More work on Color refactoring.

Browse source
This commit is contained in:
Jürg Lehni 2013-04-07 23:01:49 -07:00
parent 37566694da
commit 09824e6b91
1 changed files with 66 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
src/color/Color.js
View file

@ -55,39 +55,43 @@ var Color = this.Color = Base.extend(new function() {
var colorCache = {}, var colorCache = {},
colorCtx; colorCtx;
function nameToRgbColor(name) { function nameToRgb(name) {
var color = colorCache[name]; var cached = colorCache[name];
if (color) if (!cached) {
return color.clone(); // Use a canvas to draw to with the given name and then retrieve rgb
// Use a canvas to draw to with the given name and then retrieve rgb // values from. Build a cache for all the used colors.
// values from. Build a cache for all the used colors. if (!colorCtx) {
if (!colorCtx) { colorCtx = CanvasProvider.getContext(1, 1);
colorCtx = CanvasProvider.getContext(1, 1); colorCtx.globalCompositeOperation = 'copy';
colorCtx.globalCompositeOperation = 'copy'; }
// Set the current fillStyle to transparent, so that it will be
// transparent instead of the previously set color in case the new
// color can not be interpreted.
colorCtx.fillStyle = 'rgba(0,0,0,0)';
// Set the fillStyle of the context to the passed name and fill the
// canvas with it, then retrieve the data for the drawn pixel:
colorCtx.fillStyle = name;
colorCtx.fillRect(0, 0, 1, 1);
var data = colorCtx.getImageData(0, 0, 1, 1).data;
cached = colorCache[name] = [
data[0] / 255,
data[1] / 255,
data[2] / 255
];
} }
// Set the current fillStyle to transparent, so that it will be return cached.slice();
// transparent instead of the previously set color in case the new color
// can not be interpreted.
colorCtx.fillStyle = 'rgba(0,0,0,0)';
// Set the fillStyle of the context to the passed name and fill the
// canvas with it, then retrieve the data for the drawn pixel:
colorCtx.fillStyle = name;
colorCtx.fillRect(0, 0, 1, 1);
var data = colorCtx.getImageData(0, 0, 1, 1).data,
rgb = [data[0] / 255, data[1] / 255, data[2] / 255];
return (colorCache[name] = new Color(rgb)).clone();
} }
function hexToRgbColor(string) { function hexToRgb(string) {
var hex = string.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/); var hex = string.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
if (hex.length >= 4) { if (hex.length >= 4) {
var rgb = new Array(3); var components = new Array(3);
for (var i = 0; i < 3; i++) { for (var i = 0; i < 3; i++) {
var channel = hex[i + 1]; var value = hex[i + 1];
rgb[i] = parseInt(channel.length == 1 components[i] = parseInt(value.length == 1
? channel + channel : channel, 16) / 255; ? value + value : value, 16) / 255;
} }
return new Color(rgb); return components;
} }
} }
@ -217,10 +221,11 @@ var Color = this.Color = Base.extend(new function() {
initialize: function(arg) { initialize: function(arg) {
// We are storing color internally as an array of components // We are storing color internally as an array of components
var type, var argType = arg && typeof arg,
components = typeof arg === 'number' type,
components = argType === 'number'
? arguments ? arguments
: arg && arg.length != null : Array.isArray(arg)
? arg ? arg
: [], : [],
alpha; alpha;
@ -233,26 +238,40 @@ var Color = this.Color = Base.extend(new function() {
: 'gray'; : 'gray';
var length = types[type].length; var length = types[type].length;
alpha = components[length]; alpha = components[length];
if (this._read)
this._read = components === arguments
? length + (alpha != null ? 1 : 0)
: 1;
components = Array.prototype.slice.call(components, 0, length); components = Array.prototype.slice.call(components, 0, length);
} else {
} else if (arg) { if (argType === 'object') {
// Loop through all possible types and detect type by property // Loop through all possible types and detect type by
// names. Then convert to components array // property names. Then convert to components array
for (var t in types) { type = 'hue' in arg
var properties = types[t]; ? 'lightness' in arg
if (properties[0] in arg) { ? 'hsl'
type = t; : 'hsb'
for (var i = 0, l = properties.length; i < l; i++) : 'gray' in arg
components[i] = arg[properties[i]]; ? 'gray'
break; : 'rgb';
} var properties = types[type];
for (var i = 0, l = properties.length; i < l; i++)
components[i] = arg[properties[i]];
alpha = arg.alpha;
} else if (argType === 'string') {
components = arg.match(/^#[0-9a-f]{3,6}$/i)
? hexToRgb(arg)
: nameToRgb(arg);
type = 'rgb';
}
if (type) {
if (this._read)
this._read = 1;
} else {
// Default fallback: rgb black
type = 'rgb';
components = [0, 0, 0];
} }
alpha = arg.alpha;
}
if (!type) {
// Default fallback: rgb black
type = 'rgb';
components = [0, 0, 0];
} }
this._type = type; this._type = type;
this._components = components; this._components = components;