修改:发布解决方案
我想根据Farbtastic中选择的颜色创建颜色样本。我对HSL值进行了计算,因为它更容易并且产生更好的结果。
从Farbtastic获得HSL值后,我添加了亮度以创建新颜色。新颜色采用HSL格式,我需要将其切换回RGB或Hex,以便显示并保存以供日后使用。有些浏览器显示HSL,但我不相信所有移动浏览器都会这样做。
问题是在计算完成后将变量'newcolor'转换回RGB或Hex。
// collect parent ids for farb
$(".farbtastic").parent().each(writeColorpanel);
function writeColorpanel (i, elem) {
var picker = $.farbtastic(elem); //farb object
picker.linkTo(onColorChange); //a farb function
}
function onColorChange(color) {
// retrieve hsl value, do calculations and place in hidden input.
var hslcolor = $.farbtastic('#example_colorpicker_picker').hsl;
// brighten by 40%
var brightness = 1.4 * (Math.round(hslcolor[2]*10000)/10000);
if (brightness>1) { brightness = 1 };
if (brightness<0) { brightness = 0; }
// create the new brighter color
var newcolor = hslcolor;
newcolor[2]=brightness;
//convert to rgb (safer than trusting all mobile browsers to display HSL)
var rgb = hsl2rgb(newcolor);
//apply the color to swatches
var firstSwatch = $('#section-example_colorpicker').find('.square1');
firstSwatch.css( {'background-color': color } );
var secondSwatch = $('#section-example_colorpicker').find('.square2');
secondSwatch.css('background-color', 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')');
}
function hsl2rgb(hsl) {
var h = hsl[0], s = hsl[1], l = hsl[2];
var m1, m2, hue;
var r, g, b
h = (Math.round( 360*h )/1);
if (s == 0)
r = g = b = (l * 255);
else {
if (l <= 0.5)
m2 = l * (s + 1);
else
m2 = l + s - l * s;
m1 = l * 2 - m2;
hue = h / 360;
r = Math.round(HueToRgb(m1, m2, hue + 1/3));
g = Math.round(HueToRgb(m1, m2, hue));
b = Math.round(HueToRgb(m1, m2, hue - 1/3));
}
return {r: r, g: g, b: b};
}
function HueToRgb(m1, m2, hue) {
var v;
if (hue < 0)
hue += 1;
else if (hue > 1)
hue -= 1;
if (6 * hue < 1)
v = m1 + (m2 - m1) * hue * 6;
else if (2 * hue < 1)
v = m2;
else if (3 * hue < 2)
v = m1 + (m2 - m1) * (2/3 - hue) * 6;
else
v = m1;
return 255 * v;
}
请注意,标记为答案的脚本适用于整数值。由于Farb返回了小数值,我做了一些小编辑,在上面发布。
Wordpress主题作者: 如果您使用Options Framework Theme进行Wordpress,并希望使用Farbtastic以便使用HSL值,请参阅此Fork by Elihorn,其中包含您需要的文件。在这组文件中,我需要添加“wp_enqueue_style('farbtastic');”在我们排队脚本的行。由于WP已经拥有它,因此不需要包含farbtastic的.JS文件。当然,您还需要将Jquery排队,可能位于functions.php的顶部。
对于此问题的第2部分(重复问题),请参阅: Return different values from function used multiple times
答案 0 :(得分:2)
我决定将这些功能分开并稍微重写一下,以便它们正常工作 结束了这个:
function hsl2rgb(h, s, l) {
var m1, m2, hue;
var r, g, b
s /=100;
l /= 100;
if (s == 0)
r = g = b = (l * 255);
else {
if (l <= 0.5)
m2 = l * (s + 1);
else
m2 = l + s - l * s;
m1 = l * 2 - m2;
hue = h / 360;
r = Math.round(HueToRgb(m1, m2, hue + 1/3));
g = Math.round(HueToRgb(m1, m2, hue));
b = Math.round(HueToRgb(m1, m2, hue - 1/3));
}
return {r: r, g: g, b: b};
}
function HueToRgb(m1, m2, hue) {
var v;
if (hue < 0)
hue += 1;
else if (hue > 1)
hue -= 1;
if (6 * hue < 1)
v = m1 + (m2 - m1) * hue * 6;
else if (2 * hue < 1)
v = m2;
else if (3 * hue < 2)
v = m1 + (m2 - m1) * (2/3 - hue) * 6;
else
v = m1;
return 255 * v;
}
通过这样做来实现:
//the HSL values to use
var h = 30;
var s = 20;
var l = 70;
//call the function into a variable, returns an object rgb = {r:163, g:174, b:196}
var rgb = hsl2rgb(h, s, l);
//can now be accessed with rgb.r etc, and remember that the last two are percentages
如果你的变量newcolor是一个字符串,你将不得不这样做:
var colorArray = newcolor.split(','),
h = colorArray[0], // 0.10434092941291336
s = colorArray[1], // 1
l = colorArray[2]; // 0.756
将HSL值转换为正确的变量。
答案 1 :(得分:0)
Michael Jackson在his site上使用JavaScript进行此转换以及其他颜色转换。
function hslToRgb(h, s, l) {
var r, g, b;
if (s == 0) {
r = g = b = l; // achromatic
} else {
function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return [r * 255, g * 255, b * 255];
}