scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-07 13:22:07 -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

79
src/color/Color.js
View file

@ -55,10 +55,9 @@ 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) {
@ -66,28 +65,33 @@ var Color = this.Color = Base.extend(new function() {
colorCtx.globalCompositeOperation = 'copy'; colorCtx.globalCompositeOperation = 'copy';
} }
// Set the current fillStyle to transparent, so that it will be // Set the current fillStyle to transparent, so that it will be
// transparent instead of the previously set color in case the new color // transparent instead of the previously set color in case the new
// can not be interpreted. // color can not be interpreted.
colorCtx.fillStyle = 'rgba(0,0,0,0)'; colorCtx.fillStyle = 'rgba(0,0,0,0)';
// Set the fillStyle of the context to the passed name and fill the // Set the fillStyle of the context to the passed name and fill the
// canvas with it, then retrieve the data for the drawn pixel: // canvas with it, then retrieve the data for the drawn pixel:
colorCtx.fillStyle = name; colorCtx.fillStyle = name;
colorCtx.fillRect(0, 0, 1, 1); colorCtx.fillRect(0, 0, 1, 1);
var data = colorCtx.getImageData(0, 0, 1, 1).data, var data = colorCtx.getImageData(0, 0, 1, 1).data;
rgb = [data[0] / 255, data[1] / 255, data[2] / 255]; cached = colorCache[name] = [
return (colorCache[name] = new Color(rgb)).clone(); data[0] / 255,
data[1] / 255,
data[2] / 255
];
}
return cached.slice();
} }
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,27 +238,41 @@ 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'
: 'gray' in arg
? 'gray'
: 'rgb';
var properties = types[type];
for (var i = 0, l = properties.length; i < l; i++) for (var i = 0, l = properties.length; i < l; i++)
components[i] = arg[properties[i]]; components[i] = arg[properties[i]];
break;
}
}
alpha = arg.alpha; 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 (type) {
if (this._read)
this._read = 1;
} else {
// Default fallback: rgb black // Default fallback: rgb black
type = 'rgb'; type = 'rgb';
components = [0, 0, 0]; components = [0, 0, 0];
} }
}
this._type = type; this._type = type;
this._components = components; this._components = components;
this._alpha = alpha; this._alpha = alpha;