0

編集：投稿ソリューション

Farbtastic で選択した色に基づいて色見本を作成したかったのです。HSL 値で計算を行ったのは、その方が簡単で、より良い結果が得られるからです。

Farbtastic から HSL 値を取得した後、明るさを追加して新しい色を作成しました。新しい色は HSL 形式です。表示して後で使用できるように保存するには、RGB または Hex に戻す必要があります。一部のブラウザーは HSL を表示しますが、すべてのモバイル ブラウザーなどで 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 テーマを使用していて、HSL 値を使用できるように Farbtastic を使用したい場合は、必要なファイルが含まれているElihorn によるこの Fork を参照してください。この一連のファイルでは、スクリプトをエンキューした行に「wp_enqueue_style( 'farbtastic' );」を追加する必要がありました。farbtastic の .JS ファイルは、WP に既に含まれているため、含める必要はありません。もちろん、おそらく functions.php の先頭に、Jquery をエンキューする必要もあります。

この質問のパート 2 (重複の問題) については、次を参照してください: 複数回使用された関数から異なる値を返す

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

マイケル ジャクソンは、この変換を他の色変換と共に、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 に答える