如果我在正方形的四个角落上有四种颜色（A，B，C和D），我想用渐变填充该正方形，使得四种颜色之间混合得很好，那么如何计算点E的颜色？
点E离其他任何一个点越近，该颜色就应该更强烈地影响结果。
有什么想法吗？速度和简单性比准确性更重要。
3个回答
24
当需要在两种颜色之间产生渐变时，最好的解决方案是使用HSV表示法（色相、饱和度、明度）。
如果你有两种颜色的HSV值，只需对H、S和V进行线性插值即可得到漂亮的颜色（在RGB空间中进行插值总会导致“糟糕”的结果）。
你还可以在这里找到从RGB转换为HSV和从HSV转换为RGB的公式。
现在，对于你的四个角的问题，你可以通过E到A、B、C和D四个点的距离加权计算出四个H/S/V值的线性组合。
编辑：与tekBlues相同的方法，但在HSV空间中（在RGB和HSV空间中测试它非常容易。你将看到差异。在HSV中，你只需绕着色度圆柱旋转，这就是为什么它给出了不错的结果）。
编辑2：如果你更喜欢“速度和简单性”，可以使用L1范数而不是L2范数（欧几里得范数）。
如果你有两种颜色的HSV值，只需对H、S和V进行线性插值即可得到漂亮的颜色（在RGB空间中进行插值总会导致“糟糕”的结果）。
你还可以在这里找到从RGB转换为HSV和从HSV转换为RGB的公式。
现在，对于你的四个角的问题，你可以通过E到A、B、C和D四个点的距离加权计算出四个H/S/V值的线性组合。
编辑：与tekBlues相同的方法，但在HSV空间中（在RGB和HSV空间中测试它非常容易。你将看到差异。在HSV中，你只需绕着色度圆柱旋转，这就是为什么它给出了不错的结果）。
编辑2：如果你更喜欢“速度和简单性”，可以使用L1范数而不是L2范数（欧几里得范数）。
因此，如果a是您的正方形大小，您的点的坐标为A（0，0），B（0，a），C（a，0），D（a，a），那么点E（x，y）的色调可以通过以下方式计算：
Hue(E) = ( Hue(B)*y/a + Hue(A)*(1-y/a) ) * (x/a) + ( Hue(D)*y/a + Hue(C)*(1-y/a) ) * (1-x/a)
其中Hue(A)是点A的色调，Hue(B)是点B的色调，以此类推...
对于饱和度和明度，您可以应用相同的公式。
一旦您获得了点E的色调/饱和度/明度，您就可以将其转换为RGB空间。
- ThibThib
2
1我已经让它工作了，非常感谢。看起来也很不错！ - Roland Rabien
1上述的组合方法也被称为“双线性插值”。您正在分别对H、S和V值执行此操作。 - Dan H
2
请查看这个网站，它提供了一个视觉演示，说明“HSV渐变更加令人满意”（来自@ThibThib的评论）：
http://www.perbang.dk/rgbgradient/
这是一个渐变创建器，将创建和显示RGB渐变和HSV渐变。
如果你从FFAAAA到AAFFAA（浅红色到绿色）尝试9个步骤，你会得到一个很好的过渡，通过浅黄色，HSV和RGB都看起来很相似。
但是，如果你从FF0000到00FF00（粗体红色到绿色）尝试9个步骤，你会发现RGB在过渡时出现了丑陋的黄绿色。而HSV渐变则通过鲜艳的黄色进行过渡。
如果你从FFAAAA到AAFFAA（浅红色到绿色）尝试9个步骤，你会得到一个很好的过渡，通过浅黄色，HSV和RGB都看起来很相似。
但是，如果你从FF0000到00FF00（粗体红色到绿色）尝试9个步骤，你会发现RGB在过渡时出现了丑陋的黄绿色。而HSV渐变则通过鲜艳的黄色进行过渡。
- Dan H
1
- 确定点E到每个点A、B、C、D的距离
点E的颜色将是红/绿/蓝的组合。计算每个颜色轴作为A、B、C、D相同颜色轴的平均值，按距离加权。
distance_a = sqrt((xa-xe)^2+(ya-ye)^2)
distance_b = ....
sum_distances = distance_a + distance_b ...
red = (red_adistance_a + red_bdistance_b ... ) / sum_distances
color_E = ColorFromARgb(red,green,blue)
- tekBlues
1
这种方法似乎有些问题。A对E的颜色贡献的“权重”应该与距离的倒数成比例。就像上面所写的那样，如果E就在A旁边，那么到A的距离为0，因此A将对E的值没有任何贡献。但这正是只有A应该对E做出贡献的情况。 - Dan H
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接