15

JavaScriptで色に変換する必要がある整数があります。私は MVC モデルを使用しており、Web インターフェイス用のソフトウェアでモデルを複製しようとしています。データベースから整数形式の色を取得しています。JavaScript で色に変換する必要があります。

例: -12525360、-5952982 などの整数

私はこのようなコードを持っています:

items[x].barStyle = "stroke: Black; fill = Red";

したがって、fill:Red を指定する代わりに、整数値に対応する正確な色を指定する必要があります。

これは私がC#で書いたコードです。JavaScriptでも同じことが必要です。ここで resourcecolor= 整数入力。

     var bytes = BitConverter.GetBytes(resourcecolor);
     ti.color = Color.FromArgb(bytes[3], bytes[2], bytes[1], bytes[0]);
4

5 に答える 5

26

JavaScript では canvas や css で使用する ARGB カラーを のように文字列で表現します"rgba(0-255,0-255,0-255,0-1)"。

この関数を使用して、整数をその文字列形式に変換できます。

function toColor(num) {
    num >>>= 0;
    var b = num & 0xFF,
        g = (num & 0xFF00) >>> 8,
        r = (num & 0xFF0000) >>> 16,
        a = ( (num & 0xFF000000) >>> 24 ) / 255 ;
    return "rgba(" + [r, g, b, a].join(",") + ")";
}
toColor(-5952982)
//"rgba(165,42,42,1)"
toColor(-12525360)
//"rgba(64,224,208,1)"

デモ: http://jsfiddle.net/Ectpk/

于 2012-08-08T14:40:52.743 に答える
7

試す：

hexColor = yourNumber.toString(16)

「yourNumber」も正規化することができます。

于 2012-08-08T14:34:03.173 に答える
6

本当に簡単に：

colorString = "#" + colour.toString(16).padStart(6, '0');

しかし、実際に参照すると、整数からアルファを削除し、同時にスタイルの色を設定するため、行全体は次のようになります。

document.getElementById('selectColourBtn').style.color = "#" +
    (colour & 0x00FFFFFF).toString(16).padStart(6, '0');
于 2019-01-28T17:16:54.147 に答える
1

質問のコメントを読むと、クライアントに送信される前にサーバー上の値を操作できるようです。.NETを使用している場合は、ColorTranslator

int intColor = -12525360;
string htmlColor = ColorTranslator.ToHtml(Color.FromArgb(intColor)); //#40E0D0

またはこれ（アルファチャネルが必要な場合）：

   int intColor = -12525360;
   Color c = Color.FromArgb(intColor);
   string htmlColor = String.Format(CultureInfo.InvariantCulture, 
                        "rgba({0},{1},{2},{3})", c.R, c.G, c.B, c.A / 255f);
于 2012-08-08T14:57:05.580 に答える
1

開示：私は以下に提案されているライブラリの作成者です。

自分でコーディングするのではなく、ライブラリを使用する場合は、pusher.color Javascript ライブラリが整数から HTML への色変換をサポートしています。

// Will set c to "rgba(105,80,131,1.0)"
var c = pusher.color('packed_argb', -9875325).html()

または、別の形式が必要な場合:

var colorObject = pusher.color('packed_argb', -9875325);
var htmlString = colorObject.html();          // i.e. "rgba(105,80,131,1.0)"
var colorName  = colorObject.html('keyword'); // closest named color
var hexString  = colorObject.html('hex6');    // "#695083"

内部的には、ライブラリはEsailja の回答と非常によく似たコードを使用しています。

于 2012-08-09T20:47:17.507 に答える