Question

我在热图渐变中有各种十六进制RRGGBBAA颜色作为停止值，但我注意到为某些停止设置不同的Alpha值不会改变我的代码中的不透明度，我总是得到相同的视图 - 尽管设置由于某种原因，最后两个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) + ')');

因此，通过使用＆amp;＆amp;和/或它来获取代表alpha的部分（所有部分而不是几乎所有部分）中的位。位操作符在0xFF而不是0x7F。所以......

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)'

以十六进制更改不透明度不起作用 - 热图停止渐变 -

1 个答案: