1

ヒートマップグラデーションのストップ値としてさまざまな16進数のRRGGBBAAカラーがありますが、一部のストップに異なるアルファ値を設定してもコードの不透明度は変わらないことに気付きました。最後の2つを設定しても、常に同じビューが表示されます。 0.0の不透明度が何らかの理由で機能するため、アルファビットを00に設定します-。RRGGBBAA値は次のように記述されます。

0xaa00007f （最後の2ビット、7fは不透明度0.5にする必要があります）

0xaa0000ff （ffは1.0の不透明度です）

停止値を取得するsetGradientStops関数は次のようになります-これはヒートマップライブラリからのものであり、私のコードではありません-

setGradientStops: function(stops) {


var ctx = document.createElement('canvas').getContext('2d');
var grd = ctx.createLinearGradient(0, 0, 256, 0);

for (var i in stops) {
  grd.addColorStop(i, 'rgba(' +
    ((stops[i] >> 24) & 0xFF) + ',' +
    ((stops[i] >> 16) & 0xFF) + ',' +
    ((stops[i] >>  8) & 0x7F) + ',' +
    ((stops[i] >>  0) & 0x7F) + ')');
}

ctx.fillStyle = grd;
ctx.fillRect(0, 0, 256, 1);
this.gradient = ctx.getImageData(0, 0, 256, 1).data;
}
4

1 に答える 1

1

問題は、不透明度が 0 ～ 1 の範囲の値を想定していて、0 ～ 127 の範囲の値を出力していることです。試してみます...

grd.addColorStop(i, 'rgba(' +
((stops[i] >> 24) & 0xFF) + ',' +
((stops[i] >> 16) & 0xFF) + ',' +
((stops[i] >>  8) & 0xFF) + ',' +
(((stops[i] >>  0) & 0xFF) / 255) + ')');

そのため、0x7F ではなく 0xFF で & ビット演算子を使用して、アルファ (ほぼすべてではなくすべて) を表す部分からビットを取得します。そう...

0xFF (11111111) & 0xFF (11111111) = 0xFF (11111111) = 255

それよりも...

0xFF (11111111) & 0x7F (01111111) = 0x7F (01111111) = 127

次に、0〜255の範囲の値を取得し、255で割ってこれを必要な範囲にします。

0xFF / 255 = 1, 0x7F / 255 = 0.498, 0x00 / 255 = 0

したがって、 for0xaa00007fにgrd.addColorStopは文字列が与えられます'rgba(170,0,0,0.498)'

于 2012-10-14T16:44:17.287 に答える