1

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

1 回答 1

1

问题是 opacity 需要一个 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)'

于 2012-10-14T16:44:17.287 回答