Question

好吧，通常，如果我混合2种颜色，数学上我的期望是：`（color1 + color2）/ 2。
所以绿色/ 2 +红色/ 2 =黄色（255,0,0）/ 2 +（0,255,0）/ 2 =（127,127,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>

更新： user2864740，感谢您的建议，这里是链接： Project in ZIP and 3 screenshots with problem visualization

Answer 1

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

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

其中srcColor是顶部元素的颜色，dstColor是底层颜色。在你的情况下，alpha为100，大约为40％。所以你的公式不起作用。

要考虑的另一件事是窗户的白色背景。实际上你必须两次计算这个等式。

让我们尝试计算。

白色+透明红色+透明绿色 - ＆gt;

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)

白色+透明绿色+透明红色 - ＆gt;

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顺序排序即可获得所需的结果。

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

1 个答案: