scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

added support for HSL colors

Browse source 
new class HSLColor, new test script HSLColor.html
This commit is contained in:
gka 2011-07-05 15:38:32 +02:00
parent ccd4113ba3
commit 0e37d9e93d
3 changed files with 764 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

753
dist/paper.js vendored
View file

File diff suppressed because it is too large Load diff

42
examples/Scripts/HSLColor.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HSLColor</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
var center = view.center;
var path,
h,
s = 0.6,
l = 0.6,
d = view.size.width * 0.012;
p = new Point(),
r = view.size.width * .12;
for (s = 0; s <= 1; s+=0.2) {
for (h = 0; h < (s > 0 ? 360 : 1); h+= 20) {
p.x = (center.x - r)*0.5 + Math.cos((h-90)/180*Math.PI) * r*s;
p.y = center.y + Math.sin((h-90)/180*Math.PI) * r*s;
path = new Path.Circle(p, Math.max(d*Math.sqrt(s), 5));
path.fillColor = new HSLColor(h, s, 0.75);
p.x = center.x + Math.cos((h-90)/180*Math.PI) * r*s;
p.y = center.y + Math.sin((h-90)/180*Math.PI) * r*s;
path = new Path.Circle(p, Math.max(d*Math.sqrt(s), 5));
path.fillColor = new HSLColor(h, s, 0.5);
p.x = center.x + (center.x + r) * .5 + Math.cos((h-90)/180*Math.PI) * r*s;
p.y = center.y + Math.sin((h-90)/180*Math.PI) * r*s;
path = new Path.Circle(p, Math.max(d*Math.sqrt(s), 5));
path.fillColor = new HSLColor(h, s, 0.25);
}
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>

123
src/color/Color.js
View file

@ -51,7 +51,8 @@ var Color = this.Color = Base.extend(new function() {
var components = {
gray: ['gray'],
rgb: ['red', 'green', 'blue'],
hsb: ['hue', 'saturation', 'brightness']
hsb: ['hue', 'saturation', 'brightness'],
hsl: ['hue', 'saturation', 'lightness']
};
var colorCache = {},
@ -164,6 +165,88 @@ var Color = this.Color = Base.extend(new function() {
'gray-hsb': function(color) {
return new HSBColor(0, 0, 1 - color._gray, color._alpha);
},
'rgb-hsl': function(color) {
var r = color._red,
g = color._green,
b = color._blue,
max = Math.max(r, g, b),
min = Math.min(r, g, b),
l = (max + min) / 2,
s, h;
if (max == min) {
s = 0;
h = Number.NaN
} else {
if (l < 0.5) {
s = (max - min) / (max + min);
} else {
s = (max - min) / (2 - max - min);
}
}
if (r == max) {
h = (g - b) / (max - min);
} else if (g == max) {
h = 2 + (b - r) / (max - min);
} else {
h = 4 + (r - g) / (max - min);
}
h *= 60;
if (h < 0) h += 360;
return new HSLColor(h, s, l, color._alpha);
},
'hsl-rgb': function(color) {
var s = color._saturation,
h = color._hue,
l = color._lightness,
t1, t2, t3, c, r, g, b, i;
if (s == 0) {
return new RGBColor(l, l, l, color._alpha);
} else {
t3 = [0,0,0];
c = [0,0,0];
if (l < 0.5) {
t2 = t2 = l * (1 + s);
} else {
t2 = l + s - l * s;
}
t1 = 2 * l - t2;
h = h / 360;
t3[0] = h + 1 / 3;
t3[1] = h;
t3[2] = h - 1 / 3;
for (i = 0; i<3; i++) {
if (t3[i] < 0) t3[i] += 1;
if (t3[i] > 1) t3[i] -= 1;
if (6 * t3[i] < 1) c[i] = t1 + (t2 - t1) * 6 * t3[i];
else if (2 * t3[i] < 1) c[i] = t2;
else if (3 * t3[i] < 2) c[i] = t1 + (t2 - t1) * ((2 / 3) - t3[i]) * 6;
else c[i] = t1;
}
return new RGBColor(c[0], c[1], c[2], color._alpha);
}
},
'hsl-gray': function(color) {
return converters['rgb-gray'](converters['hsl-rgb'](color));
},
'gray-hsl': function(color) {
return new HSLColor(0, 0, 1 - color._gray, color._alpha);
},
'hsl-hsb': function(color) {
return converters['rgb-hsb'](converters['hsl-rgb'](color));
},
'hsb-hsl': function(color) {
return converters['rgb-hsl'](converters['hsb-rgb'](color));
}
};
@ -181,6 +264,9 @@ var Color = this.Color = Base.extend(new function() {
? new RGBColor(arg.red, arg.green, arg.blue, arg.alpha)
: arg.gray !== undefined
? new GrayColor(arg.gray, arg.alpha)
: arg.lightness !== undefined
? new HSLColor(arg.hue, arg.saturation, arg.lightness,
arg.alpha)
: arg.hue !== undefined
? new HSBColor(arg.hue, arg.saturation, arg.brightness,
arg.alpha)
@ -670,3 +756,38 @@ var HSBColor = this.HSBColor = Color.extend(/** @lends HSBColor# */{
_colorType: 'hsb'
});
/**
* @name HSLColor
* @class An HSLColor object is used to represent any HSL color value.
* @extends Color
*/
var HSLColor = this.HSLColor = Color.extend(/** @lends HSLColor# */{
/**
* Creates an HSLColor object
*
* @name HSLColor#initialize
* @param {Number} hue the hue of the color as a value in degrees between
* {@code 0} and {@code 360}.
* @param {Number} saturation the saturation of the color as a value
* between {@code 0} and {@code 1}
* @param {Number} lightness the lightness of the color as a value
* between {@code 0} and {@code 1}
* @param {Number} [alpha] the alpha of the color as a value between
* {@code 0} and {@code 1}
*
* @example {@paperscript}
* // Creating an HSLColor:
*
* // Create a circle shaped path at {x: 80, y: 50}
* // with a radius of 30:
* var circle = new Path.Circle(new Point(80, 50), 30);
*
* // Create an HSLColor with a hue of 90 degrees, a saturation
* // 100% and a lightness of 100%:
* circle.fillColor = new HSLColor(90, 1, 1);
*/
_colorType: 'hsl'
});