десятичное значение в rgb и обратно в десятичное - PullRequest
Новая
       20

десятичное значение в rgb и обратно в десятичное

0 голосов
/ 03 апреля 2020

У меня есть цвет в десятичной форме, и мне нужно преобразовать его в rgb и обратно в de, поэтому я использовал это для этого: 

var currentcolor = 0xffd100;

const rgb_format = (c) => {
  var newrgb = {r: (c & 0xff0000) >> 16,
                g: (c & 0x00ff00) >> 8,
                b: (c & 0x0000ff)}

  return newrgb;
};

var rgb = rgb_format(currentcolor);

const decimal_format = (newrgb) => {
  let decimal = (newrgb.r << 16) + (newrgb.g << 8) + (newrgb.b);

  console.log(decimal);

  return decimal;
};

color.color = decimal_format(rgb);

Дело в том, что у меня есть редактор rgb с ползунками для каждое значение (r, g, b). И они работают как надо, но когда значение равно r или меньше, другие ползунки (g, b) перестают менять цвет компонента, который я редактирую.

То же самое происходит, когда r и b равны 0, а g больше 16. В этом случае g меняет цвет на красный, когда он меньше 16, а когда больше 16, он не отображает цвет. Вот gif, чтобы показать мою проблему: color-edit-problem-gif или alternate

1 Ответ

2 голосов
/ 03 апреля 2020

... Я также отображаю цвет следующим образом: style="background: #{currentcolor.toString(16)};

Это не будет работать правильно. Рассмотрим десятичный цвет 1092 (0x000444). Если currentcolor имеет это значение, currentcolor.toString(16) приводит к 444. #444 - это , а не - это то же самое, что #000444 в CSS, #444 - это цвет #444444. Точно так же цвет 65535 (0x00FFFF) приведет к #ffff, который является недопустимым цветом CSS (они должны состоять из трех или шести цифр, а не четырех).

Для правильного вывода цвета вам необходимо для заполнения начала строки: 

style="background: #{currentcolor.toString(16).padStart(6, "0")}
...