javascript - 更改十六进制的不透明度不起作用 - 热图停止梯度 -

Question

我有各种十六进制 RRGGBBAA 颜色作为热图渐变中的停止值，但我注意到为某些停止设置不同的 Alpha 值不会改变我的代码中的不透明度，我总是得到相同的 View - 尽管设置由于某种原因，最后两个 alpha 位设置为 00 作为 0.0 不透明度。 RRGGBBAA 值的写法如下:

0xaa00007f(最后两位，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;
}

Answer 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) + ')');

因此，它通过在 0xFF 而不是 0x7F 上使用 & 位运算符，从表示 alpha 的部分(全部而不是几乎全部)获取位。所以...

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

因此，对于0xaa00007f，grd.addColorStop将被赋予字符串'rgba(170,0,0,0.498)'