В спецификации SVG есть много хороших уравнений для различных режимов наложения.И да, вам нужно рассчитать и новый альфа и новый цвет - для каждого канала.Для стандартных режимов наложения альфа рассчитывается следующим образом:
alpha_final = alpha_bg + alpha_fg - alpha_bg * alpha_fg
Примечание : я вижу, что вы рассматриваете альфа в диапазоне от 0 до 1, что хорошо.Альфа-значения в CSS всегда определяются как значения с плавающей точкой от 0 до 1;хорошо придерживаться этого соглашения, потому что оно значительно упрощает вычисления.
Это помогает «предварительно умножить» каждый цветовой канал по его альфа;они более полезны для интерпретации и использования обычных формул:
colour_bg_a = colour_bg * alpha_bg
Другими словами:
red_bg_a = red_bg * alpha_bg
green_bg_a = green_bg * alpha_bg
blue_bg_a = blue_bg * alpha_bg
Затем для альфа-компоновки на обычном Джейн (например, наложение листов кальки,также известный как src-over в оригинальной работе Портера и Даффа и спецификации альфа-композитинга SVG ), вы берете каждый канал и вычисляете его следующим образом:
colour_final_a = colour_fg_a + colour_bg_a * (1 - alpha_fg)
Последний шаг состоит в том, чтобы «умножить» каждое окончательное значение цветового канала на конечную альфа:
colour_final = colour_final_a / alpha_final
и вставить его в свой миксин следующим образом:
rgba(red_final, green_final, blue_final, alpha_final)
Другие режимы наложения(умножение, разность, экран и т. д.) - несколько более сложные формулы, но концепция для каждого отдельного режима одна и та же:
- Разделите значения R, G, B и A для обоих передних планов.и цвета фона
- Рассчитайте альфа нового, окончательного цвета по формуле выше
- Предварительно умножьте все значения R, G и B на их альфа-значение
- Рассчитайте новые, окончательные R, G и Bзначения (вставьте формулу режима наложения здесь)
- Не умножьте конечные значения R, G и B на конечные альфа
- Обрежьте окончательные значения R, G и B так, чтобы они былиот 0 до 255 (необходимо для некоторых режимов, но не для всех)
- Соберите цвет снова вместе!
Если вы все еще заинтересованы в этом, я делаюсама вещь в Stylus .Вы можете увидеть мой прогресс здесь: https://github.com/pdaoust/stylus-helpers/blob/master/blend.styl Возможно, вы сможете использовать его в качестве отправной точки для своего собственного микса Sass.
Первое, что я делаю, это конвертирую все R, G иB значения от 0 - 255 значений до 0 - 1 значения с плавающей запятой для целей расчетов.Не знаю, если это необходимо, и для этого нужно преобразовать их обратно в 0 - 255 значений.Мне это показалось правильным, и Портер и Дафф работали с 0 - 1 значениями с плавающей запятой в их оригинальной статье.
(У меня возникают проблемы с некоторыми режимами компоновки, которые приводят к совершенно отличным результатам от ожидаемыхчто изображения спецификации SVG. Я подозреваю, что спецификация дает неправильные уравнения. Если кто-то знает о режимах смешивания Портера / Даффа, я был бы очень благодарен за их помощь!)