int32 в шестнадцатеричную строку не работает .. Машинопись

Question

У меня есть int32, содержащий значения rgba, закодированные следующим образом:

values = [255, 255, 255, 255];
this.colorInt = ( values[0] << 24 ) | ( values[1] << 16 ) | ( values[2] << 8 ) | values[3];

, в этом случае все значения варьируются от 0-255

Теперь, когда я пытаюсь преобразовать это в шестнадцатеричная строка, например, так:

this.colorInt.toString(16);

Я хочу получить это: #FFFFFFFF, но я получаю это: -1 Я видел много сообщений от stackoverflow об этом, но я не могу заставить его работать ...

Что я здесь не так делаю?

Answer 1

Это потому, что целое число -1 (основание 10) = 11111111111111111111111111111111 (основание 2)

Если вы используете побитовые операторы, вы увидите эту проблему, поскольку она имеет дело только с 32-разрядными целыми числами.

Другие операторы, такие как умножение, позаботятся об этом. Поскольку они не являются побитовыми операторами, их вычисление не ограничивается 32-битными целыми числами. Вы можете использовать следующее.

this.colorInt = 255 + (255 * 2**8) + (255 * 2**16) + (255*2**24)
this.colorInt.toString(16) // "ffffffff"

В противном случае я бы посоветовал в качестве более читабельного подхода

function hexer(a,b,c,d){
    return ([a,b,c,d].map(x=>x.toString(16)).join(''))
}
hexer([255,255,255,255]) // "ffffffff"

Answer 2

цвета представлены 3 цветами (RGB), чтобы ввести альфа-переменную, ваш кейс не будет работать.

здесь у вас работает код

const values = [255, 255, 255];
const colorInt = ( values[1] << 16 ) | ( values[2] << 8 ) | values[3];

console.log(colorInt);
console.log(colorInt.toString(16));