0

私は Javascript と jQuery が初めてで、次のスクリプトの調整に問題があります。

http://jsfiddle.net/kJdX3/

書かれているように、色値の配列から最も近い色を見つけます。

この配列内の色の値を評価する代わりに、コードを編集するにはどうすればよいですか。

var base_colors=["660000","0066cc","ff9900"];

次のような JSON 配列内の hexvalue プロパティを評価します。

var base_colors = [
    { "name" : "burgundy" , "number" : "17A" , "hexvalue" : "660000"}, 
    { "name" : "blue" , "number" : "18B ", "hexvalue" : "0066cc"}, 
    { "name" : "orange" , "number" : "19C" , "hexvalue" : "ff9900"}];

最後に、jQuery を使用して、base_colors 配列を含む外部 JSON ファイルを参照するにはどうすればよいですか?

4

2 に答える 2

1

これを実現するために、jsFiddleに変更を加えました。

http://jsfiddle.net/kJdX3/9/

function getSimilarColors (color) {
    var base_colors = [
{ "name" : "burgundy" , "number" : "17A" , "hexvalue" : "660000"}, 
{ "name" : "blue" , "number" : "18B ", "hexvalue" : "0066cc"}, 
{ "name" : "orange" , "number" : "19C" , "hexvalue" : "ff9900"}];
    //Convert to RGB, then R, G, B
    var color_rgb = hex2rgb(color);
    var color_r = color_rgb.split(',')[0];
    var color_g = color_rgb.split(',')[1];
    var color_b = color_rgb.split(',')[2];

    //Create an emtyp array for the difference betwwen the colors
    var differenceArray=[];

    //Function to find the smallest value in an array
    Array.min = function( array ){
           return Math.min.apply( Math, array );
    };


    //Convert the HEX color in the array to RGB colors, split them up to R-G-B, then find out the difference between the "color" and the colors in the array
    $.each(base_colors, function(index, value) { 
        var base_color_rgb = hex2rgb(value.hexvalue);
        var base_colors_r = base_color_rgb.split(',')[0];
        var base_colors_g = base_color_rgb.split(',')[1];
        var base_colors_b = base_color_rgb.split(',')[2];

        //Add the difference to the differenceArray
        differenceArray.push(Math.sqrt((color_r-base_colors_r)*(color_r-base_colors_r)+(color_g-base_colors_g)*(color_g-base_colors_g)+(color_b-base_colors_b)*(color_b-base_colors_b)));
    });

    //Get the lowest number from the differenceArray
    var lowest = Array.min(differenceArray);

    //Get the index for that lowest number
    var index = differenceArray.indexOf(lowest);

    //Function to convert HEX to RGB
    function hex2rgb( colour ) {
        var r,g,b;
        if ( colour.charAt(0) == '#' ) {
            colour = colour.substr(1);
        }

        r = colour.charAt(0) + colour.charAt(1);
        g = colour.charAt(2) + colour.charAt(3);
        b = colour.charAt(4) + colour.charAt(5);

        r = parseInt( r,16 );
        g = parseInt( g,16 );
        b = parseInt( b ,16);
        return r+','+g+','+b;
    }

    //Return the HEX code
    return base_colors[index].hexvalue;
}

これが私が変更したものです：

var base_color_rgb = hex2rgb(value.hexvalue);

return base_colors[index].hexvalue;

于 2013-02-07T17:01:40.967 に答える
0

http://api.jquery.com/jQuery.getJSON/を使用

$.getJSON(url, params, function(data) {
 // your json with colors
});

非常に重要: json は有効でなければなりません!

于 2013-02-07T16:57:40.247 に答える