40

私は Javascript と Canvas を使用してペイント アプリを作成しており、この形式の文字列を使用して選択した色を指定していました。

"rgb(255,0,0)"

キャンバス コンテキストの fillStyle プロパティがその形式の文字列を受け取るためです。

ただし、この文字列から個々のコンポーネントを取得する必要があり、面倒な文字列操作なしでそれを行う方法があるかどうか疑問に思っていました。その文字列を一種の色オブジェクトに変換し、その r、g、および b コンポーネントにアクセスする方法が組み込まれている可能性がありますか?

ありがとう。

4

9 に答える 9

55

注-私たちは皆、正規表現が私の頭を食べ、私の犬の態度を蹴ったことに賛成していますが、正規表現バージョンはより良い方法のようです. 私の意見。見てみな。

非正規表現:

var rgb = 'rgb(200, 12, 53)';

rgb = rgb.substring(4, rgb.length-1)
         .replace(/ /g, '')
         .split(',');

console.log(rgb);

http://jsfiddle.net/userdude/Fg9Ba/

出力:

["200", "12", "53"]

または...本当に単純な正規表現：

編集：おっと、i何らかの理由で正規表現に含まれていました。

var rgb = 'rgb(200, 12, 53)';

rgb = rgb.replace(/[^\d,]/g, '').split(',');

console.log(rgb);

http://jsfiddle.net/userdude/Fg9Ba/2

于 2012-06-10T18:10:03.053 に答える
22

はるかに簡単な方法..

    var rgb = 'rgb(200, 12, 53)'.match(/\d+/g);
    console.log(rgb);

出力は次のようになります

    ["200", "12", "53"]

「シンプルは常に美しい！」 :)

于 2012-06-12T19:09:21.213 に答える
4

xolor ライブラリのようなカラー ライブラリを使用するのはどうですか:

xolor("rgb(200,100,40)").r // returns the red part
于 2017-01-17T06:00:53.180 に答える
1

色が rgbA、hex、色名、hsl ではなく、rgb 形式であることが確実な場合でも、「rgb(25%,55%,100%)」を使用できます。

function Rgb(rgb){
    if(!(this instanceof Rgb)) return new Rgb(rgb);
    var c= rgb.match(/\d+(\.\d+)?%?/g);
    if(c){
        c= c.map(function(itm){
            if(itm.indexOf('%')!= -1) itm= parseFloat(itm)*2.55;
            return parseInt(itm);
        });
    }
    this.r= c[0];
    this.g= c[1];
    this.b= c[2];
}

var c= Rgb('rgb(10%,25%,55%)'); alert([cr, cg, cb])

注-キャンバスを使用している場合は、マップがあります。

それ以外は-

Array.prototype.map=Array.prototype.map || function(fun, scope){
        var T= this, L= T.length, A= Array(L), i= 0;
        if(typeof fun== 'function'){
            while(i<L){
                if(i in T){
                    A[i]= fun.call(scope, T[i], i, T);
                }
                ++i;
            }
            return A;
        }
    }
于 2012-06-10T18:29:56.120 に答える