0

一度だけ機能する機能があります。これは、「return」と表示されていて、ループなどがないためだと確信しています。この関数のnoobを解除するのを手伝ってくれる人はいますか？（これはすべてjQueryコンテナーに含まれていますが、jQueryはおそらく質問とはあまり関係がないと思います。）

Farbtasticから返されるHSL色は、（色相、彩度、明るさ）のような形式です。3番目の値、明度を調整していますが、その部分は機能します。ただし、すべての繰り返しが機能するわけではありません。これにより、すべての新しい見本が最初の見本の色になります。 

    function onColorChange(color) {

        // retrieve HSL color value
        var hslcolor = $.farbtastic('#main_color_picker').hsl;

        // create 4 new colors of varying brightness, and variable names to save them to db.
                var newcolor1 = hslcolor;
                var newcolor2 = hslcolor;
                var newcolor3 = hslcolor;
                var newcolor4 = hslcolor;
                    newcolor1[2] = 0.10 * (Math.round(hslcolor[2]*10000)/10000);
                    newcolor2[2] = 0.85 * (Math.round(hslcolor[2]*10000)/10000);
                    newcolor3[2] = 1.15 * (Math.round(hslcolor[2]*10000)/10000);
                    newcolor4[2] = 1.50 * (Math.round(hslcolor[2]*10000)/10000);
                var rgb1 = hsl2rgb(newcolor1);
                var rgb2 = hsl2rgb(newcolor2);
                var rgb3 = hsl2rgb(newcolor3);
                var rgb4 = hsl2rgb(newcolor4);

        //apply the color to swatches and show original swatch in the middle.
        var firstSwatch = $('#section-main_color').find('.square1');
        firstSwatch.css( 'background-color', 'rgb('+rgb1.r+','+rgb1.g+','+rgb1.b+')' );
        var secondSwatch = $('#section-main_color').find('.square2');
        secondSwatch.css('background-color', 'rgb('+rgb2.r+','+rgb2.g+','+rgb2.b+')');
                    // original color is in square 3 
        var fourthSwatch = $('#section-main_color').find('.square4');
        fourthSwatch.css('background-color', 'rgb('+rgb3.r+','+rgb3.g+','+rgb3.b+')');
        var fifthSwatch = $('#section-main_color').find('.square5');
        fifthSwatch.css('background-color', 'rgb('+rgb4.r+','+rgb4.g+','+rgb4.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};
}

この質問のパート1については、Theme-Options-PanelでFarbtasticを使用するHSLについて、以下を参照してください。FarbtasticはHSLをRGBまたは16進数に変換します。

フォローアップ： 配列の実際のコピーが必要な場合は、次のビットを見つけました。

        var newcolor = hslcolor.slice(0);

ほとんどの場合、これを使用しないことをお勧めします。別の一連の計算で使用するために、元の配列をそのまま保持する必要があることがわかったので、コピーで明るさを調整しました。

4

1 に答える 1

0

これはあなたが探しているものですか：http：//jsfiddle.net/uttqX/6/ それが機能しなかった理由は、すべての変数を同じに割り当てたため、同じ変数を何度も更新していたためです物乞いの初期変数。したがって、これらの変数のいずれかに対する更新は、初期変数（hslcolor）に伝播してから、他のすべての変数に戻ります。

于 2012-08-06T02:21:02.137 に答える