2

我正在尝试创建一个自定义颜色菜单，用户可以从中选择颜色并通过调整颜色的亮度和饱和度来创建自己的颜色。我的目标是创建类似于CUSTOM COLOR的东西 （仅使用 2 个滑块亮度和饱和度的颜色调整部分）。

关于我尝试过的描述：我创建了 2 个 jqueryui 滑块，一个用于亮度，一个用于饱和度。

$("#lightness").slider({
    range: "min",
    value: 0,
    min: -0.5,
    max: 0.5,
    step: 0.1,
    slide: function (e, ui) {
     $("#existingcolor").children("div").not("#lightdarkslider,#saturations")
      .each(function (i, v) {
          var color = $(v).attr("title");
          var lightcolor = Lighten(color, ui.value);
          $(v).attr("title", lightcolor).css("backgroundColor", lightcolor);
      });
    }
});

$("#saturation_slider").slider({
    range: "min",
    value: 0,
    min: -0.5,
    max: 0.5,
    step: 0.1,
    slide: function (e, ui) {
     $("#existingcolor").children("div").not("#lightdarkslider,#saturations")
       .each(function (i, v) {
        var color = $(v).attr("title");
        var rgb = HEXtoRGB(color);
        var hsv = rgbToHsv(rgb[0], rgb[1], rgb[2]);
        hsv[1] += ui.value * 32;
        rgb = hsvToRgb(hsv[0], hsv[1], hsv[2]);
        color = RGBtoHEX("rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")");
        $(v).attr("title", color).css("backgroundColor", color);
        });
    }
});

现在如果用户滑动亮度滑块，函数LIGHTEN被调用。它接受 3 个参数 col(color)、by 和 shade。我正在传递颜色（值：调色板中的所有现有颜色）和（值：jQuery ui 滑块当前值）和阴影（值：它将始终未定义）。

function Lighten(col, by, shade) {
    if (undefined === by) {
        by = 1;
    } else if (by < 0) {
        Darken(col, -by, shade);
    }
    if (undefined === shade) {
        shade = 32;
    }

    var c = HEXtoRGB(col);

    if ((c[0] += shade * by) > 0xff) c[0] = 0xff;
    if ((c[1] += shade * by) > 0xff) c[1] = 0xff;
    if ((c[2] += shade * by) > 0xff) c[2] = 0xff;

    return RGBtoHEX("rgb(" + c[0] + "," + c[1] + "," + c[2] + ")");
}

如果用户滑动饱和度滑块，首先我们将调色板中所有现有颜色的 HSV 值一一获取，然后将当前滑块值* 32添加到饱和度值。

这在一定程度上起作用，但如果用户连续滑动滑块，所有颜色都会变亮。谁能告诉我我做错了什么，如果有比让我知道的更好或更简单的方法来做同样的事情吗？

其他支持功能：

function Darken(col, by, shade) {
    if (undefined === by) {
        by = 1;
    } else if (by < 0) {
        return Lighten(col, -by, shade);
    }
    if (undefined === shade) {
        shade = 32;
    }

    var c = HEXtoRGB(col);

    if ((c[0] -= shade * by) < 0) c[0] = 0;
    if ((c[1] -= shade * by) < 0) c[1] = 0;
    if ((c[2] -= shade * by) < 0) c[2] = 0;

    return RGBtoHEX("rgb(" + c[0] + "," + c[1] + "," + c[2] + ")");
}

function HEXtoRGB(color) {
    document.getElementById("temp1").style.backgroundColor = color;
    color = document.getElementById("temp1").style.backgroundColor;

    var rgb = color.split(",");
    rgb[0] = parseInt(rgb[0].substring(rgb[0].indexOf("(") + 1));
    rgb[1] = parseInt(rgb[1]);
    rgb[2] = parseInt(rgb[2].substring(0, rgb[2].lastIndexOf(")")));

    return rgb;
}

function hsvToRgb(h, s, v) {

    var s = s / 100,
         v = v / 100;

    var hi = Math.floor((h / 60) % 6);
    var f = (h / 60) - hi;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);

    var rgb = [];

    switch (hi) {
        case 0: rgb = [v, t, p]; break;
        case 1: rgb = [q, v, p]; break;
        case 2: rgb = [p, v, t]; break;
        case 3: rgb = [p, q, v]; break;
        case 4: rgb = [t, p, v]; break;
        case 5: rgb = [v, p, q]; break;
    }

    var r = Math.min(255, Math.round(rgb[0] * 256)),
        g = Math.min(255, Math.round(rgb[1] * 256)),
        b = Math.min(255, Math.round(rgb[2] * 256));

    return [r, g, b];

}

function rgbToHsv(r, g, b) {
     var r = (r / 255),
         g = (g / 255),
     b = (b / 255);

    var min = Math.min(Math.min(r, g), b),
        max = Math.max(Math.max(r, g), b),
        delta = max - min;

    var value = max,
        saturation,
        hue;

    // Hue  
    if (max == min) {
        hue = 0;
    } else if (max == r) {
        hue = (60 * ((g - b) / (max - min))) % 360;
    } else if (max == g) {
        hue = 60 * ((b - r) / (max - min)) + 120;
    } else if (max == b) {
        hue = 60 * ((r - g) / (max - min)) + 240;
    }

    if (hue < 0) {
        hue += 360;
    }

    // Saturation  
    if (max == 0) {
        saturation = 0;
    } else {
        saturation = 1 - (min / max);
    }

    return [Math.round(hue), Math.round(saturation * 100), Math.round(value * 100)];
}

function RGBtoHEX(rgbstring) {
    var str, rgb, hexstring;
    str = rgbstring.substring(rgbstring.indexOf("(") + 1, rgbstring.indexOf(")"));
    rgb = str.split(",");
    if (rgb.length == 4)
        hexstring = rgbToHex(rgb[0], rgb[1], rgb[2], rgb[3]);
    else if (rgb.length == 3)
        hexstring = rgbToHex(rgb[0], rgb[1], rgb[2]);
    return hexstring;
}

function rgbToHex(R, G, B, A) {
    if (typeof A == "undefined")
        return "#" + toHex(R) + toHex(G) + toHex(B);
    else
        return "#" + toHex(R) + toHex(G) + toHex(B) + toHex(A);
}

function toHex(n) {
    n = parseInt(n, 10);
    if (isNaN(n)) return "00";
    n = Math.max(0, Math.min(n, 255));
    return "0123456789ABCDEF".charAt((n - n % 16) / 16)
      + "0123456789ABCDEF".charAt(n % 16);
}

编辑

HTML

        <div id="newcolorpicker" class="ui-widget-content ui-corner-all">
            <div id="existingcolor" class="ui-widget-content ui-corner-all">
                <span class="ui-widget-content ui-widget">Drag a color onto an element below </span>
                <br />
                <div class="rc ec col" title="#FFFFFF" style="background-color: #FFFFFF;">
                </div>
                <div class="rc ec col" title="#F2F2F2" style="background-color: #F2F2F2;">
                </div>
                <div class="rc ec col" title="#E6E6E6" style="background-color: #E6E6E6;">
                </div>
                <div class="rc ec col" title="#CCCCCC" style="background-color: #CCCCCC;">
                </div>
                <div class="rc ec col" title="#808080" style="background-color: #808080;">
                </div>
                <div class="rc ec col" title="#4D4D4D" style="background-color: #4D4D4D;">
                </div>
                <div class="rc ec col" title="#000000" style="background-color: #000000;">
                </div>
                <div class="rc ec col" title="#C1272D" style="background-color: #C1272D;">
                </div>
                <div class="rc ec col" title="#ED1C24" style="background-color: #ED1C24;">
                </div>
                <div class="rc ec col" title="#F7931E" style="background-color: #F7931E;">
                </div>
                <div class="rc ec col" title="#FFCC33" style="background-color: #FFCC33;">
                </div>
                <div class="rc ec col" title="#FCEE21" style="background-color: #FCEE21;">
                </div>
                <div class="rc ec col" title="#D9E021" style="background-color: #D9E021;">
                </div>
                <div class="rc ec col" title="#8CC63F" style="background-color: #8CC63F;">
                </div>
                <div class="rc ec col" title="#009245" style="background-color: #009245;">
                </div>
                <div class="rc ec col" title="#006837" style="background-color: #006837;">
                </div>
                <div class="rc ec col" title="#00A99D" style="background-color: #00A99D;">
                </div>
                <div class="rc ec col" title="#33CCCC" style="background-color: #33CCCC;">
                </div>
                <div class="rc ec col" title="#33CCFF" style="background-color: #33CCFF;">
                </div>
                <div class="rc ec col" title="#29ABE2" style="background-color: #29ABE2;">
                </div>
                <div class="rc ec col" title="#0071BC" style="background-color: #0071BC;">
                </div>
                <div class="rc ec col" title="#2E3192" style="background-color: #2E3192;">
                </div>
                <div class="rc ec col" title="#662D91" style="background-color: #662D91;">
                </div>
                <div class="rc ec col" title="#93278F" style="background-color: #93278F;">
                </div>
                <div class="rc ec col" title="#D4145A" style="background-color: #D4145A;">
                </div>
                <div class="rc ec col" title="#ED1E79" style="background-color: #ED1E79;">
                </div>
                <div class="rc ec col" title="#C7B299" style="background-color: #C7B299;">
                </div>
                <div class="rc ec col" title="#736357" style="background-color: #736357;">
                </div>
                <div class="rc ec col" title="#C69C6D" style="background-color: #C69C6D;">
                </div>
                <div class="rc ec col" title="#8C6239" style="background-color: #8C6239;">
                </div>
                <div class="rc ec col" title="#603813" style="background-color: #603813;">
                </div>
                <br />
                <div id="lightdarkslider" class="ui-widget">
                    <div class="lightcontol">
                        <label for="lightness" class="csl">
                            Lightness
                        </label>
                        <div id="lightness" class="cssb uislider">
                        </div>
                    </div>
                </div>
                <div id="saturations" class="ui-widget" style="margin-left: 200px; width: 300px;
                    height: 20px">
                    <div class="saturationcontol">
                        <label for="saturation_slider" class="csl" style="padding-left: 35px;">
                            Saturation
                        </label>
                        <div id="saturation_slider" class="cssb uislider" style="margin: 8px 0 0 15px;">
                        </div>
                    </div>
                </div>
            </div>
4

1 回答 1

0

您可能需要阅读他们在这篇文章中谈论 hsla 的部分： http ://www.jquerysdk.com/api/jQuery.Color

我希望它有所帮助。

于 2012-12-03T16:31:16.307 回答