Wpf 颜色混合结果取决于元素的Z顺序？

通常，如果我混合两种颜色，数学上我的期望值是：`（color1+color2）/2<所以绿色/2+红色/2=黄色（255,0,0）/2+（0255,0）/2=（127127,0）`。

我用WPF准备了测试。我得到了我几乎无法解释的结果。

那你觉得呢？为什么以及结果如何依赖于z阶？

PS：我在这里没有名声，所以，我很抱歉，不能和你们分享一些照片，这让主题变得清晰。请花点时间将我的代码粘贴到您的项目中，看看我在这里说的是什么

PPS：下面是可视化WPF中颜色混合问题的代码

<Grid>
    <Grid.Resources>
        <Color A='100' R='0' G='0' B='255' x:Key='clr01' />
        <Color A='100' R='0' G='255' B='0' x:Key='clr02' />
        <Color A='100' R='255' G='0' B='0' x:Key='clr03' />

        <SolidColorBrush Color='{StaticResource clr01}' x:Key='scb01' />
        <SolidColorBrush Color='{StaticResource clr02}' x:Key='scb02' />
        <SolidColorBrush Color='{StaticResource clr03}' x:Key='scb03' />
    </Grid.Resources>
    <TabControl >
        <TabItem Header='case 1 rectangles (actual)'>
            <Grid>
                <Grid.Resources>
                    <Style TargetType='{x:Type Border}'>
                        <Setter Property='BorderBrush' Value='Black' />
                        <Setter Property='BorderThickness' Value='1' />
                        <Setter Property='SnapsToDevicePixels' Value='True' />
                        <Setter Property='Height' Value='20' />
                        <Setter Property='Width' Value='400' />
                    </Style>
                </Grid.Resources>
                <Canvas>
                    <Border Background='{StaticResource scb01}' Canvas.Left="10" Canvas.Top="10" />
                    <Border Background='{StaticResource scb02}' Canvas.Left="100" Canvas.Top="10" />

                    <Border Background='{StaticResource scb02}' Canvas.Left="100" Canvas.Top="40" />
                    <Border Background='{StaticResource scb01}' Canvas.Left="10" Canvas.Top="40" />



                    <Border Background='{StaticResource scb02}' Canvas.Left="10" Canvas.Top="90" />
                    <Border Background='{StaticResource scb03}' Canvas.Left="100" Canvas.Top="90" />

                    <Border Background='{StaticResource scb03}' Canvas.Left="100" Canvas.Top="120" />
                    <Border Background='{StaticResource scb02}' Canvas.Left="10" Canvas.Top="120" />



                    <Border Background='{StaticResource scb03}' Canvas.Left="10" Canvas.Top="170" />
                    <Border Background='{StaticResource scb01}' Canvas.Left="100" Canvas.Top="170" />

                    <Border Background='{StaticResource scb01}' Canvas.Left="100" Canvas.Top="200" />
                    <Border Background='{StaticResource scb03}' Canvas.Left="10" Canvas.Top="200" />
                </Canvas>
            </Grid>
        </TabItem>
        <TabItem Header='case 2 circles'>
            <Grid >
                <Grid.Resources>
                    <Style TargetType='{x:Type Ellipse}'>
                        <Setter Property='Stroke' Value='Black' />
                        <Setter Property='StrokeThickness' Value='1' />
                        <Setter Property='SnapsToDevicePixels' Value='True' />
                        <Setter Property='Width' Value='100' />
                        <Setter Property='Height' Value='100' />
                    </Style>
                    <Style TargetType='{x:Type Border}'>
                        <Setter Property='BorderBrush' Value='Black' />
                        <Setter Property='BorderThickness' Value='1' />
                        <Setter Property='SnapsToDevicePixels' Value='True' />
                        <Setter Property='Height' Value='250' />
                        <Setter Property='Width' Value='250' />
                    </Style>
                </Grid.Resources>
                <Canvas Background='White'>
                    <Border Canvas.Left="10" Canvas.Top="10">
                        <Canvas >
                            <Ellipse Canvas.Left="50" Canvas.Top="50"  Fill='{StaticResource scb01}' />
                            <Ellipse Canvas.Left="100" Canvas.Top="50" Fill='{StaticResource scb02}' />
                            <Ellipse Canvas.Left="75" Canvas.Top="100" Fill='{StaticResource scb03}' />
                        </Canvas>
                    </Border>
                    <Border Canvas.Left="270" Canvas.Top="10">
                        <Canvas >
                            <Ellipse Canvas.Left="75" Canvas.Top="100" Fill='{StaticResource scb03}' />
                            <Ellipse Canvas.Left="50" Canvas.Top="50"  Fill='{StaticResource scb01}' />
                            <Ellipse Canvas.Left="100" Canvas.Top="50" Fill='{StaticResource scb02}' />
                        </Canvas>
                    </Border>
                    <Border Canvas.Left="530" Canvas.Top="10">
                        <Canvas >
                            <Ellipse Canvas.Left="100" Canvas.Top="50" Fill='{StaticResource scb02}' />
                            <Ellipse Canvas.Left="75" Canvas.Top="100" Fill='{StaticResource scb03}' />
                            <Ellipse Canvas.Left="50" Canvas.Top="50"  Fill='{StaticResource scb01}' />
                        </Canvas>
                    </Border>
                </Canvas>
            </Grid>
        </TabItem>
    </TabControl>
</Grid>

更新： 用户2864740，感谢您的建议，以下是链接：

---

当你将颜色与透明度结合起来时，你应该应用以下等式：

result = alpha * srcColor + (1 - alpha) * dstColor

其中srcColor是顶部元素的颜色，dstColor是底部元素的颜色。 在你的例子中，α是100，大约是40%。所以你的公式不起作用

另一件需要考虑的是窗户的白色背景。实际上，你必须计算这个方程两次

让我们试着计算一下

白色+透明红色+透明绿色->

0.4 * red + 0.6 * white = (1, 0.6, 0.6)
0.4 * green + 0.6 * (1, 0.6, 0.6) = (0.6, 0.76, 0.36)

白色+透明绿色+透明红色->

0.4 * green + 0.6 * white = (0.6, 1, 0.6)
0.4 * red + 0.6 * (1, 0.6, 0.6) = (0.76, 0.6, 0.36)

---

结果取决于顺序，这就是为什么在3D中实现高性能透明度如此困难的原因。在2D中，您只需按Z顺序排序即可获得所需的结果。

包括相关图片的链接，有人会将其添加到内联中。这确实可以解释。还是很难理解，为什么顺序会影响结果。我同意-alpha 100有误导性，下次将再次检查我的代码是否与我的问题同步：）谢谢，我能够将此应用到我的项目中，效果非常好！