Алгоритм для аддитивного цвета, смешивающегося для значений RGB
Выражение (n-- > 1) аналогично сравнению значения n больше 1. Но вещь, которую вы должны заметить , это значение n, не будет уменьшаться начало) при сравнении здесь . Это происходит потому, что значение n сначала сравнивается с 1 только после этого, значение n уменьшается. Чтобы понять это ясно, вы можете взглянуть на это.
function test(name) {
var n = 5;
while (n-- == 5) { //Here the decrement doesn't takes places so it gets inside the block
console.log(n); //This statement returns the value of n as 4.
}
}
const testing = new test();4 ответа
Это зависит от того, что Вы хотите, и это может помочь видеть то, что результаты имеют различные методы.
Если Вы хотите
Red + Black = Red Red + Green = Yellow Red + Green + Blue = White Red + White = White Black + White = White
затем добавление с зажимом работает (например. min(r1 + r2, 255)) Это больше похоже на легкую модель, которую Вы упомянули.
Если Вы хотите
Red + Black = Dark Red Red + Green = Dark Yellow Red + Green + Blue = Dark Gray Red + White = Pink Black + White = Gray
затем необходимо будет насчитать значения (например. (r1 + r2) / 2) Это работает лучше на освещение/затемнение цветов и создание градиентов.
Для смешивания альфа-каналов использования можно использовать эти формулы:
r = new Color();
r.A = 1 - (1 - fg.A) * (1 - bg.A);
if (r.A < 1.0e-6) return r; // Fully transparent -- R,G,B not important
r.R = fg.R * fg.A / r.A + bg.R * bg.A * (1 - fg.A) / r.A;
r.G = fg.G * fg.A / r.A + bg.G * bg.A * (1 - fg.A) / r.A;
r.B = fg.B * fg.A / r.A + bg.B * bg.A * (1 - fg.A) / r.A;
fg цвет краски. bg фон. r итоговый цвет. 1.0e-6 просто действительно небольшое число, для компенсации погрешностей округления.
Примечание: Все переменные, используемые здесь, находятся в диапазоне [0.0, 1.0]. Необходимо разделиться или умножиться на 255, если Вы хотите использовать значения в диапазоне [0, 255].
Например, 50%-й красный сверху 50%-го зеленого:
// background, 50% green
var bg = new Color { R = 0.00, G = 1.00, B = 0.00, A = 0.50 };
// paint, 50% red
var fg = new Color { R = 1.00, G = 0.00, B = 0.00, A = 0.50 };
// The result
var r = new Color();
r.A = 1 - (1 - fg.A) * (1 - bg.A); // 0.75
r.R = fg.R * fg.A / r.A + bg.R * bg.A * (1 - fg.A) / r.A; // 0.67
r.G = fg.G * fg.A / r.A + bg.G * bg.A * (1 - fg.A) / r.A; // 0.33
r.B = fg.B * fg.A / r.A + bg.B * bg.A * (1 - fg.A) / r.A; // 0.00
Итоговый цвет: (0.67, 0.33, 0.00, 0.75), или 75%-й коричневый (или темно-оранжевый).
Вы могли также инвертировать эти формулы:
var bg = new Color();
if (1 - fg.A <= 1.0e-6) return null; // No result -- 'fg' is fully opaque
if (r.A - fg.A < -1.0e-6) return null; // No result -- 'fg' can't make the result more transparent
if (r.A - fg.A < 1.0e-6) return bg; // Fully transparent -- R,G,B not important
bg.A = 1 - (1 - r.A) / (1 - fg.A);
bg.R = (r.R * r.A - fg.R * fg.A) / (bg.A * (1 - fg.A));
bg.G = (r.G * r.A - fg.G * fg.A) / (bg.A * (1 - fg.A));
bg.B = (r.B * r.A - fg.B * fg.A) / (bg.A * (1 - fg.A));
или
var fg = new Color();
if (1 - bg.A <= 1.0e-6) return null; // No result -- 'bg' is fully opaque
if (r.A - bg.A < -1.0e-6) return null; // No result -- 'bg' can't make the result more transparent
if (r.A - bg.A < 1.0e-6) return bg; // Fully transparent -- R,G,B not important
fg.A = 1 - (1 - r.A) / (1 - bg.A);
fg.R = (r.R * r.A - bg.R * bg.A * (1 - fg.A)) / fg.A;
fg.G = (r.G * r.A - bg.G * bg.A * (1 - fg.A)) / fg.A;
fg.B = (r.B * r.A - bg.B * bg.A * (1 - fg.A)) / fg.A;
Формулы вычислят тот фон или нарисуют цвет, должен был бы быть должен произвести данный итоговый цвет.
Если бы Ваш фон непрозрачен, результат также был бы непрозрачен. Основной цвет мог затем взять диапазон значений с различными альфа-значениями. Для каждого канала (красный, зеленый и синий), необходимо проверить, какой диапазон альф приводит к допустимым значениям (0 - 1).
Немного точек:
- Я думаю, что Вы хотите использовать минуту вместо макс.
- Я думаю, что Вы хотите использовать 255 вместо 256
Это даст:
(r1, g1, b1) + (r2, g2, b2) = (минута (r1+r2, 255), минута (g1+g2, 255), минута (b1+b2, 255))
Однако "естественный" способ смешать цвета состоит в том, чтобы использовать среднее число, и затем Вам не требуется минуту:
(r1, g1, b1) + (r2, g2, b2) = ((r1+r2)/2, (g1+g2)/2, (b1+b2)/2)
Да, это настолько просто. Другая опция состоит в том, чтобы найти среднее число (для создания градиентов).
Это действительно просто зависит от эффекта, которого Вы хотите достигнуть.
Однако, когда Alpha добавляется, это сложно. Существует много различных методов для смешивания использования альфы.
Пример простого альфа-смешивания: http://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending