0

编辑：发布解决方案

我想根据 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 主题作者：如果您正在使用Wordpress 的Options Framework 主题，并且想要使用 Farbtastic 以便您可以使用 HSL 值，请参阅Elihorn 的这个 Fork，其中包含您需要的文件。在这组文件中，我需要在我们将脚本排入队列的行中添加“wp_enqueue_style('farbtastic');”。不需要包含 farbtastic 的 .JS 文件，因为 WP 已经有了它。当然，您还需要将 Jquery 排入队列，可能位于 functions.php 的顶部。

对于这个问题的第 2 部分（重复问题），请参阅： Return different values from function used multiple times

4

2 回答 2

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 值放入正确的变量中。

于 2012-08-03T23:21:17.030 回答
0

Michael Jackson 在他的网站上使用 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];
}
于 2012-08-03T22:29:55.933 回答