2

整数 X (正票数) に応じて背景色 C を決定したい

わかりました、できました

if(x==0) c = '#000';
else if(x > 0 && x < 5 ) c = '#001'
else if(X<=5 <= 20) c = '#002';
//and so on...

しかし、これを段階的に行うにはどうすればよいですか？つまり、0 から 500 票 -> 500 トーンの青色ですか? （私が間違っていなければ、HEXの可能な2桁（そうでなければ、15 * 15 xD））

何か案は？

4

3 に答える 3

3

アイデアを探しているだけなので、他の誰も提案しないアイデアをここに示します。まず、「Catmull-Rom Spline」式を調べます。要するに、一連の制御点が与えられた場合に曲線を計算するための式を提供する、非常に単純な行列乗算のトリックです。

これで、Catmull-Rom スプラインについてすべて理解できたので、3 空間で曲線を作成するコードを記述できます。では、3 次元空間でない場合、RGB とは何でしょう? したがって、適切なカラー コントロール ポイント (RGB カラー) をいくつか選択し、便利な Catmull-Rom 実装を使用して、それらすべてのカラーを通るパラメトリック カーブを生成します。カーブに沿って必要な数のカラーを使用します。

カラー プログレッションの優れた点は、トランジション全体で非常に「スムーズ」であることです。

于 2011-04-01T23:56:17.533 に答える
2

ページに raphaeljs を含め、関数estimateColorForValue()とtoHex()コードのどこかに貼り付けます。estimateColorForValue(hue, value, darkestValue, brightestValue)ある値の色を計算し、範囲内のどこにあるかを見て色を補間します[darkestValue-brightestValue] value。hue範囲内にあります[0-1]:0.1オレンジブラウン、0.4グリーン、0.8ピンクがかった色、およびその間の多くの色。色相の小さな変化が視覚的な色を劇的に変化させます。

例:estimateColorForValue(.1, 15, 1, 20)は、1 ～ 20 の範囲のデータについて、オレンジ色のスペースで値 15 の色を計算すると説明できます。

toHex(estimateColorForValue(.1, 15, 1, 20)) ==> "#cf8415"

コード：

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>

<script>

function toHex(hsb) {
  return Raphael.hsb2rgb(hsb.h, hsb.s, hsb.b).hex;
}

function estimateColorForValue(hue, value, darkestValue, brightestValue) {
  // Constants to determine saturation and brightness
  var darkBrightness = 0.6;
  var brightBrightness = 1;
  var darkSaturation = 0.3;
  var brightSaturation = 1;

  // Compute saturation and brightness:
  var gradient = (value - darkestValue) / (brightestValue - darkestValue);
  var saturation = darkSaturation + gradient * (brightSaturation - darkSaturation);
  var brightness = darkBrightness + gradient * (brightBrightness - darkBrightness);

  return {h: hue, s:saturation, b:brightness};
}
</script>
于 2011-08-20T12:20:42.073 に答える
2

私はおそらく次のようなものを使用します：

var blueness = x / 2;
if (blueness > 255) blueness = 255;
rgb(0, 0, blueness);

ただし、この sprintf 実装を使用して、他の言語で 16 進数に変換するのと同じように使用できます。

于 2011-04-01T23:56:55.653 に答える