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が呼び出されます。col(color)、by、shade の 3 つの引数を受け取ります。私は color (値: パレット内のすべての既存の色を 1 つずつ)と by (値: jQuery ui スライダーの現在の値)と shade (値: 常に未定義になります) を渡しています。

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 値を1 つずつ取得し、現在のスライダー値* 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 に答える