如何混合两个ARGB像素？

Question

如何混合两个ARGB像素？

示例

这里A是（带Alpha通道的红色）和B是（带Alpha通道的蓝色）。

- SunnyShah

---

这可能会给你一些线索https://dev59.com/fnI-5IYBdhLWcg3wYXH8，虽然它是RGB而不是ARGB，但概念是相似的。 - o.k.w

嗨，为什么FA = 19？另外，“混合”是指什么类型的？像这样的东西吗？http://lectureonline.cl.msu.edu/~mmp/applist/RGBColor/c.htm - keyboardP

@o.k.w 这完全不同。 - SunnyShah

@Sunny，是的，我能理解为什么它不同。FA=19让我感到困惑。 - o.k.w

FA代表最终的Alpha通道（即透明度）。 - apaderno

Answer 1

从您获取图片的同一维基百科文章中获取：

将其转换为介于0到255之间的值：

rOut = (rA * aA / 255) + (rB * aB * (255 - aA) / (255*255))
gOut = (gA * aA / 255) + (gB * aB * (255 - aA) / (255*255))
bOut = (bA * aA / 255) + (bB * aB * (255 - aA) / (255*255))
aOut = aA + (aB * (255 - aA) / 255)

- Mark Ransom

---

我认为在发布时公式可能是错误的。从现在的文章来看，你仍然需要通过混合α进行除法。在类似TEX的符号表示中：C_o = \frac{C_a \alpha_a + C_b \alpha_b (1 - \alpha_a)}{\alpha_a + \alpha_b(1 - \alpha_a)} - General Grievance

@Calculuswhiz，我不知道你在说什么。原始公式是由Wikimedia托管的图像，它仍然和我发布时一样有效。你的编辑是相同的公式，如果不是相同的图像的话。当你完成alpha的工作后，除以alpha是一个单独的步骤，如果你最后的混合是在一个100%不透明的对象下面，实际上是不必要的。 - Mark Ransom

是的，编辑只是为了在暗色主题下更好地显示。Google Charts API比原始图像更清晰。我没有尝试更改公式，因为我觉得那可能会与帖子的意图产生冲突。但是，你的答案说图片来自维基百科文章。该文章不再使用该图片。我在文章中找到的最接近的公式都使用alpha除法。除非还有另一篇文章？http://en.wikipedia.org/wiki/Alpha_compositing - General Grievance

@Calculuswhiz 那几乎肯定是我在看的页面。我从未想过维基百科页面随时间不稳定。将其除以 alpha 看起来对我来说是错误的，我不确定为什么维基百科现在包括它。 - Mark Ransom

@GeneralGrievance，虽然花了几年时间，但我最终回到了维基百科文章，以找出我们为什么分道扬镳的原因。确实，在最后需要除以 aOut 以将预乘值转换回非关联值。我需要更新答案以保持一致性。 - Mark Ransom

如果有帮助的话，我制作了一个使用Google Charts API的Google表格。它可以为您生成包括alt-text在内的markdown。 - General Grievance

Answer 2

上述算法是错误的。可以通过将aA = 0进行替换来验证。然后发现，如果您试图混合颜色B与完全透明的颜色A（即不可见），则根据这个公式，逻辑上颜色B保持不变，但实际上它却被改变了。 使用渐变透明度进行错误混合的结果。 因此，正确的解决方案应该像这样：

aOut = aA + (aB * (255 - aA) / 255)
rOut = (rA * aA + rB * aB * (255 - aA) / 255)/aOut 
gOut = (gA * aA + gB * aB * (255 - aA) / 255)/aOut 
bOut = (bA * aA + bB * aB * (255 - aA) / 255)/aOut 

正确混合渐变透明度的结果。

- Nikolai Semko

Answer 3

看起来这是你想要的内容：http://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending，但我对你的记号有些困惑，因为维基百科说argb值应该在0.0到1.0之间。所以我不认为这个公式会给你FA=19。你能澄清一下吗？

编辑：现在你把FA=19的事情拿掉了，我倾向于使用那个公式。

- danben

---

你也可以使用0到255的RGB组件值；如果你需要使用这些值来计算什么，那么最好使用0到255之间的值。公式可以更改为适用于0到255之间的值。 - apaderno

我认为这个公式期望每个值都是百分比，因此您可以在公式中使用0.0-1.0，然后再乘以255。 - danben

谢谢danben，我会注意将这个公式从（0到1.0）转换为（0到255）。 - SunnyShah