Alpha 合成算法（混合模式）

Question

为了我自己的乐趣，我正在尝试在 SASS 中实现 PDF 规范中的混合模式。

PDF规格： http://www.adobe.com/content /dam/Adobe/en/devnet/acrobat/pdfs/PDF32000_2008.pdf

第 322 页是 Alpha 合成部分。

输入值采用 RGBA 格式，但现在我正在尝试实现 alpha 分量的混合。我该如何去做呢？根据我收集的数据，我的值应该在 0.0 和 1.0 之间，就这样了。但是从规格来看，您似乎应该为每个颜色通道进行混合？我是否只需将其平均即可返回到我的 alpha 分量的 RGBA 形式？

任何帮助都是值得的，我不介意阅读博客、书籍等来得到我的答案，因为这纯粹是一种智力练习。

预先感谢，

埃米尔

Answer 1

SVG 规范有很多适用于各种混合模式的良好方程。是的，您确实必须为每个通道计算新的 alpha 和新的颜色。对于标准混合模式，alpha 的计算方式如下：

alpha_final = alpha_bg + alpha_fg - alpha_bg * alpha_fg

注意：我发现您认为 alpha 介于 0 和 1 之间，这很好。 CSS 中的 Alpha 值始终定义为 0 到 1 之间的浮点值；坚持这个惯例是件好事，因为它使计算变得非常容易。

它有助于将每个颜色通道“预乘”其 alpha；这些对于解释和使用常用公式更有帮助：

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

然后，对于简单的 alpha 合成（如覆盖描图纸，也称为 src-over） “http://keithp.com/%7Ekeithp/porterduff/” rel="noreferrer">Porter 和 Duff 的原始论文 和 SVG alpha 合成规范），您采用每个通道并进行计算：

colour_final_a = colour_fg_a + colour_bg_a * (1 - alpha_fg)

最后一步是将每个最终颜色通道值“取消乘”最终的 alpha：

colour_final = colour_final_a / alpha_final

并以某种方式将其放入您的 mixin 中：

rgba(red_final, green_final, blue_final, alpha_final)

其他混合模式（乘法、差值、屏幕等）是稍微复杂的公式，但每个单独的概念模式是相同的：

1. 分离前景色和背景色的 R、G、B 和 A 值
2. 使用上述公式计算新的最终颜色的 alpha
3. 将所有 R、G 和 B 值预乘以它们的 alpha value
4. 计算新的最终 R、G 和 B 值（在此处插入混合模式公式）
5. 将最终 R、G 和 B 值取消与最终 alpha 的
6. 乘积 剪辑最终 R、G 和 B 值，使它们成为0 到255（某些模式必需，但不是全部）
7. 将颜色重新组合在一起！

如果您仍然对此感兴趣，我一直在 Stylus 中做同样的事情。您可以在这里查看我的进度： https://github.com/pdaoust/ stylus-helpers/blob/master/blend.styl 您也许可以使用它作为您自己的 Sass mixin 的起点。

我做的第一件事是将所有 R、G 和 B 值从 0 - 255 值转换为 0 - 1 浮点值以进行计算。我不知道这是否有必要，它确实需要将它们转换回 0 - 255 值。我感觉这是对的，Porter 和 Duff 在他们的原始论文中使用了 0 - 1 浮点值。

（我在使用某些合成模式时遇到了麻烦，这些模式产生的结果与 SVG 规范所描绘的预期结果截然不同。我怀疑该规范给出了错误的方程。如果有人了解 Porter/Duff 混合模式，我会告诉您非常感谢他们的帮助！）