将 rgba 颜色转换为十六进制时接收到不正确的 alpha 通道
Receive incorrect alpha channel when convert rgba color to hex
为了将带有 alpha 通道的 rgba 颜色转换为十六进制,我使用了代码
let rChannel = 255;
let gChannel = 255;
let bChannel = 255;
let aChannel = 0.7;
console.log('#'+(256 + parseFloat(rChannel)).toString(16).substr(1) + ((1 << 24) + (parseFloat(gChannel) << 16) | (parseFloat(bChannel) << 8) | aChannel).toString(16).substr(1));
// #ffffff00, but expect #ffffffb3
根据 link
的回答给出
但它 returns 不正确的十六进制 alpha 通道(00 而不是 b3)。
如何修复?
对浮点值使用按位 |
(或)运算符没有意义。您必须使用 ~~(achannel * 255)
来获取整数值。
根据您的 0 ... 1 achannel 值的范围,如果值永远不能为 1,您可能希望使用 256 而不是 255。
edit — 现在我想起来了,您不需要 ~~
显式整数转换,因为 |
无论如何都会这样做,所以只要分数值始终小于 1,简单的 (achannel * 256)
就可以工作;否则 255.
为了将带有 alpha 通道的 rgba 颜色转换为十六进制,我使用了代码
let rChannel = 255;
let gChannel = 255;
let bChannel = 255;
let aChannel = 0.7;
console.log('#'+(256 + parseFloat(rChannel)).toString(16).substr(1) + ((1 << 24) + (parseFloat(gChannel) << 16) | (parseFloat(bChannel) << 8) | aChannel).toString(16).substr(1));
// #ffffff00, but expect #ffffffb3
根据 link
的回答给出但它 returns 不正确的十六进制 alpha 通道(00 而不是 b3)。
如何修复?
对浮点值使用按位 |
(或)运算符没有意义。您必须使用 ~~(achannel * 255)
来获取整数值。
根据您的 0 ... 1 achannel 值的范围,如果值永远不能为 1,您可能希望使用 256 而不是 255。
edit — 现在我想起来了,您不需要 ~~
显式整数转换,因为 |
无论如何都会这样做,所以只要分数值始终小于 1,简单的 (achannel * 256)
就可以工作;否则 255.