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_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在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值
4. 计算新的最终R,G和B值(此处插入混合模式公式)
5. 将最终的R,G和B值乘以最终的alpha值
6. 剪切最终的R,G和B值,使它们在0到255之间(某些模式需要,但不是全部)
7. 将颜色重新组合在一起!

如果你仍然对此感兴趣,我一直在做手写笔.你可以在这里看到我的进步:https://github.com/pdaoust/stylus-helpers/blob/master/blend.styl你也许可以使用它作为一个起点,为自己的Sass的mixin.

我做的第一件事是将所有R,G和B值从0到255的值转换为0 - 1浮点值,以便进行计算.Dunno,如果这是必要的,它确实需要将它们转换回0 - 255值.对我来说感觉很对,而波特和达芙在他们的原始论文中以0-1的浮动值工作.

(我遇到了一些合成模式的问题,它们产生了与SVG规格图片的预期结果完全不同的结果.我怀疑规范给出了错误的方程式.如果有人知道Porter/Duff混合模式,我'我非常感谢他们的帮助!)