当前位置：文江博客话题详情

3 种颜色之间的颜色插值

发布于 2024-10-25 22:11:10 字数 193 浏览 1 评论 0原文

我使用以下方程获得从 colorA 到 colorB 的漂亮颜色渐变，但我不知道如何对 3 种颜色执行相同的操作，因此渐变从 colorA 到 colorB 再到 colorC

colorT = colorA * p + colorB * (1.0 - p); 其中“p”是从 0.0 到 1.0 的百分比

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

っ左 2024-11-01 22:11:10

谢谢你的公式。但我必须对其进行一些修改，因为它没有在 3 种颜色之间正确插值（颜色变化有跳跃），

以下是修复方法：

if (p < 0.5)
        {
            COLORx = (COLORb * p * 2.0) +  COLORa * (0.5 - p) * 2.0;
        }
        else
        {
            COLORx = COLORc * (p - 0.5) * 2.0 + COLORb * (1.0 - p) * 2.0;          
        }

Thanks for the formula. But I had to make some modifications to it, as it didn't interpolate between the 3 colors properly (there was jumps in color change)

Here is the fix for that:

if (p < 0.5)
        {
            COLORx = (COLORb * p * 2.0) +  COLORa * (0.5 - p) * 2.0;
        }
        else
        {
            COLORx = COLORc * (p - 0.5) * 2.0 + COLORb * (1.0 - p) * 2.0;          
        }

回复收藏 0 原文

陈年往事 2024-11-01 22:11:10

好吧，对于 3 种颜色，您可以使用 p = 0.0 到 2.0 进行相同操作：

if p <= 1.0
  colorT = colorA * p + colorB * (1.0 - p);
else
  colorT = colorB * (p - 1.0) + colorC * (2.0 - p);

或者对其进行缩放，以便您仍然可以使用 p = 0.0 到 1.0：

if p <= 0.5
  colorT = colorA * p * 2.0 + colorB * (0.5 - p) * 2.0;
else
  colorT = colorB * (p - 0.5) * 2.0 + colorC * (1.0 - p) * 2.0;

Well, for 3 colors, you can just to the same with p = 0.0 to 2.0:

if p <= 1.0
  colorT = colorA * p + colorB * (1.0 - p);
else
  colorT = colorB * (p - 1.0) + colorC * (2.0 - p);

Or scale it so you can still use p = 0.0 to 1.0:

if p <= 0.5
  colorT = colorA * p * 2.0 + colorB * (0.5 - p) * 2.0;
else
  colorT = colorB * (p - 0.5) * 2.0 + colorC * (1.0 - p) * 2.0;

回复收藏 0 原文

明月松间行 2024-11-01 22:11:10

可能可以为此构造一个表达式，但最简单的方法是使用一个条件来使用不同的表达式，具体取决于您是在范围的 A - B 部分还是 B - C 部分：

colorT =
  p < 0.5
    ? colorA * p * 2.0 + colorB * (1.0 - p * 2.0)
    : colorB * (p - 0.5) * 2.0 + colorC * (1.0 - (p - 0.5) * 2.0);

It might be possible to construct a single expression for that, but the simplest is to use a condition to use different expressions depending on whether you are in the A - B part or B - C part of the range:

colorT =
  p < 0.5
    ? colorA * p * 2.0 + colorB * (1.0 - p * 2.0)
    : colorB * (p - 0.5) * 2.0 + colorC * (1.0 - (p - 0.5) * 2.0);

回复收藏 0 原文

み零 2024-11-01 22:11:10

一种可能的解决方案是通过贝塞尔曲线使用插值：
http://en.wikipedia.org/wiki/B%C3%A9zier_curve
如果您查看特殊情况的二次贝塞尔曲线，您可以看到一个在您的情况下的 3 个点或颜色之间进行插值的公式。

colorT=(1-p*p)Color0 + 2(1-p)Color1 + (p*p)Color2   , 0<=p<=1

这是线性公式的概括。

编辑：

不过，第二个方法不会得到你的结果，因为中间点从未被触及。
要获得接触所有点（颜色）的平滑曲线，您必须使用样条线 http://en .wikipedia.org/wiki/Spline_interpolation

one possible solution is to use interpolation via Bézier Curve:
http://en.wikipedia.org/wiki/B%C3%A9zier_curve
if you look at the special case Quadratic Bézier Curve, you can see a formula that interpolate between 3 points, or colors in your case.

colorT=(1-p*p)Color0 + 2(1-p)Color1 + (p*p)Color2   , 0<=p<=1

This is a generalization of your linear formula.

EDIT:

on second though, this method doesn't get your results, as the intermediate point is never touched.
To get a smooth curve that touch all of your points (colors) you have to use a spline http://en.wikipedia.org/wiki/Spline_interpolation

回复收藏 0 原文